Javascript 如何计算形状的高度和宽度,包括画布中的边框宽度?
我正在做一个使用HTML5和javascript的项目。我有一个画布,可以在上面加载文档Javascript 如何计算形状的高度和宽度,包括画布中的边框宽度?,javascript,html,canvas,Javascript,Html,Canvas,我正在做一个使用HTML5和javascript的项目。我有一个画布,可以在上面加载文档 canvas = document.getElementById('pdf'); ctx = canvas.getContext('2d'); 在上面的画布中,将加载文档。 我必须在运行时将不同的形状绘制为一个单独的画布。因此,在绘制时,我必须为每个形状创建一个新的画布(必需) 鼠标向下移动 function mouse_Pressed(e) { getMouse(e);//getting cu
canvas = document.getElementById('pdf');
ctx = canvas.getContext('2d');
在上面的画布中,将加载文档。
我必须在运行时将不同的形状绘制为一个单独的画布。因此,在绘制时,我必须为每个形状创建一个新的画布(必需)
鼠标向下移动
function mouse_Pressed(e) {
getMouse(e);//getting current X and Y position
x1=mx; y1=my;
var cords=getMousePos(canvas,e);
annCanvas=document.createElement('canvas'); //Creating
annCanvasContext=annCanvas.getContext('2d');
isDraw=true;isDrawAnn=true;
}
鼠标移动
function mouse_Dragged(e)
{
if(isDraw)
{
getMouse(e);
x2=mx; y2=my;
calculatePoints(x1,y1,x2,y2);
var width=endX-startX;
var height=endY-startY;
annCanvas.style.position = "absolute";
annCanvas.width=4; //Width of square
annCanvas.style.left=""+startX+"px";
annCanvas.style.top=""+startY+"px";
annCanvas.height=height;
annCanvas.style.zIndex="100000";
document.getElementById("canvas").appendChild(annCanvas);
annCanvasContext.fillStyle='rgb(255,255,0)';
annCanvasContext.lineWidth=borderWidth;
annCanvasContext.strokeRect(0,0,width,height);
annCanvasContext.stroke();
}
}
鼠标松开
function mouse_Released(e)
{
isDrag = false;
isDraw=false;
isDrawAnn=false;
}
主要问题是,如果我画的是边框宽度为50的矩形,那么它的画布外部部分将被切割,因为画布的面积较小(即矩形形状)。所以我想计算画布的高度、宽度及其边框宽度。这应该考虑到边框宽度以及宽度等
function init() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var s = size(canvas);
alert(s[0]);
}
function size(el) {
var clientHeight = (el.offsetHeight > el.clientHeight) ? el.offsetHeight : el.clientHeight;
var clientWidth = (el.offsetWidth > el.clientWidth) ? el.offsetWidth : el.clientWidth;
return [clientWidth, clientHeight];
};
HTML:
<body onload="init();">
<canvas id="canvas" width="200" height="300" style="width: 500px; height: 400px; border: 10px solid brown;"></canvas>
</body>