Question

我在画布上创建了一个圆圈。是否可以使我的圈子可点击？

function createCircle(context, x, y, radius, color) {
   context.beginPath();
   context.fillStyle = color;
   context.arc(x, y, radius, 0, Math.PI * 2, true);
   context.closePath();
   context.fill();
}

Answer 1

我不是专家，但我认为您应该抓住click上的canvas事件，然后写一个function来检查点击的点是否在圆半径内。（即点击点与圆形原点之间的差异小于或等于半径）。

Answer 2

当然可以。如果您想将光标更改为手（它在链接上的方式），您也可以这样做。只需在画布上添加一个onmousemove事件，如果鼠标与中心的距离（您可能必须使用毕达哥拉斯）小于半径，则将画布的光标CSS属性更改为指针。否则，当然，将CSS属性返回到默认值。同样，添加一个onclick事件，并检测它何时被点击，并在它确实时执行。因此，您的画布中有一个可点击的圆圈。

Answer 3

您可以将 mousedown 事件添加到画布中，或者只是添加事件侦听器

canvas.addEventListener('mousedown', function(evt) 
{
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        //Here ur getting mouse position x and y coordinates. 
  },
 false);

HTML5可点击画布元素？

3 个答案: