javascript - javascript画布回合限制和onclick变量

Question

我刚刚开始学习自己的画布，所以我有一些简单的问题，谷歌无法回答我。

首先，我有一个 700px 宽和 700px 高的画布元素。所以我的画布的限制是一个矩形。但我不希望它是一个矩形，我需要一个圆。使用 CSS 时，只有样式会发生变化。

我的第二个问题是关于事件的。我有一个绘制新对象的变量。如果有人点击对象，应该会发生一些事情。但是，如果它不是元素而是 javascript 中的变量，我该如何单击该对象？

非常感谢大家！

score 1 · Accepted Answer

CSS 允许您在视觉上划定您正在处理的代码的区域，“border-radius”属性可以为您做到这一点。如果您的脚本需要圆圈区域内的特定鼠标事件，您可以应用一些基本数学来确定鼠标是在圆圈“内部”还是“外部”。

另一方面，您不能“单击变量”，但您可以定义具有预定义高度和宽度属性的空元素（suck as 或元素），将单击事件绑定到它，然后将事件与脚本中的变量相关联。

score 1 · Accepted Answer

您可以使用以下clip功能屏蔽画布：

function maskCanvas(){
    ctx.beginPath(); 
    ctx.arc(rad, rad, rad, 0, Math.PI * 2, false);   
    ctx.clip();
}

maskCanvas();

在画布上绘制任何其他内容之前，您需要执行此操作。

ctx.fillRect(0,0,100,100);

你创建的最后一个Path被画布记住

ctx.beginPath();
ctx.fillStyle = "#f00";
ctx.arc(rad,rad,50, 0, Math.PI * 2, false);
ctx.fill();

因此您可以使用isPointInPath来确定鼠标单击是否在该路径内。

canvas.onclick = function(e){
    console.log(ctx.isPointInPath(e.x,e.y));
};

2 回答 2