javascript - 如何获取 Canvas 上下文的框尺寸？

Question

我刚刚开始在 HTML 中使用 canvas 元素。

我在用路径覆盖图像时遇到了障碍。当有人点击路径时，我可以使用 isPointInPath 方法来知道点击了哪条路径。

问题是我想重新绘制放大到路径外边界的图像，但我看不到检索该信息的方法。

ctx.beginPath();
ctx.arc(can.width / 2, can.height / 2, can.height / 2.5, ((2 * Math.PI) / 10) * 7, (2 * Math.PI) / 10);
ctx.lineTo(can.width / 2, can.height / 2);
ctx.closePath();

在这个 fiddle 中http://jsfiddle.net/JohnSReid/78PEX/ ，我画了一条弧线。如果我使用我在上面的代码中绘制的点，那么我将裁剪圆弧的外部点。

有没有办法获取弧线所使用区域的完整尺寸？

Answer 1

演示:http://jsfiddle.net/m1erickson/9xgwY/

您可以像这样获得圆(或弧)圆周上的任何点:

function XYonCircle(cx,cy,radius,radians){
    var x=cx+radius*Math.cos(radians);
    var y=cy+radius*Math.sin(radians);
    return({x:x,y:y});
}

获取弧线的边界框:

var cw=canvas.width;
var ch=canvas.height;
var PI2=Math.PI*2;

var left=XYonCircle(cw/2,ch/2,ch/2.5,PI2/10*7).x;
var top=XYonCircle(cw/2,ch/2,ch/2.5,PI2*.75).y;
var right=XYonCircle(cw/2,ch/2,ch/2.5,0).x;
var bottom=XYonCircle(cw/2,ch/2,ch/2.5,PI2/10).y;

如果更改弧线，某些边界点将位于弧线所经过的任意 Angular :0、PI/2、PI 和 PI*3/2。

剩余的边界点将位于圆弧的起点和终点。