如何计算形状高度和宽度，包括画布中的边框宽度？答案

【问题标题】：How to calculate shape height and width including its border width in canvas?如何计算形状高度和宽度，包括画布中的边框宽度？
【发布时间】：2012-09-09 08:27:01
【问题描述】：

我正在开发一个使用 HTML5 和 javascript 的项目。我有一个将加载文档的画布。

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 的矩形，那么由于画布面积较小（即矩形形状），其 Canvas-outside 部分将被切割。所以我想用它的边框宽度来计算画布的高度和宽度。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

这应该考虑到边框宽度以及宽度等。

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>

【讨论】：