javascript - HTML5 Canvas 中的简单按钮

Question

我是 Javascript 的新手，我正在制作一个基于 Web 的项目 (HTML)凭借我的基本知识，我已经设法创建了一个表单并在其上绘制了一个矩形。

我现在希望能够单击矩形，像使用按钮一样使用它，但我似乎找不到任何可以帮助我的教程或答案。

这是我的矩形的代码:

function Playbutton(top, left, width, height, lWidth, fillColor, lineColor) {
    context.beginPath();
    context.rect(250, 350, 200, 100); 
    context.fillStyle = '#FFFFFF'; 
    context.fillStyle = 'rgba(225,225,225,0.5)';
    context.fillRect(25,72,32,32);
    context.fill(); 
    context.lineWidth = 2;
    context.strokeStyle = '#000000'; 
    context.stroke();
    context.closePath();
    context.font = '40pt Kremlin Pro Web';
    context.fillStyle = '#000000';
    context.fillText('Start', 345, 415);
  }

我知道您需要找到 x、y 坐标和鼠标位置才能在矩形区域中单击。但我真的被困在这一点上。这可能真的很简单和合乎逻辑，但我们都必须走过这个阶段。

Answer 1

您的思考方向是正确的。
您可以通过多种方式解决这个问题，例如使用评论中建议的 html 按钮。

但是如果您确实需要处理 Canvas 内的点击事件，您可以这样做:

向 Canvas 添加点击处理程序，当鼠标指针位于边界矩形内时，您可以触发点击功能:

//Function to get the mouse position
function getMousePos(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}
//Function to check whether a point is inside a rectangle
function isInside(pos, rect){
    return pos.x > rect.x && pos.x < rect.x+rect.width && pos.y < rect.y+rect.height && pos.y > rect.y
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//The rectangle should have x,y,width,height properties
var rect = {
    x:250,
    y:350,
    width:200,
    height:100
};
//Binding the click event on the canvas
canvas.addEventListener('click', function(evt) {
    var mousePos = getMousePos(canvas, evt);

    if (isInside(mousePos,rect)) {
        alert('clicked inside rect');
    }else{
        alert('clicked outside rect');
    }   
}, false);

jsFiddle