HTML5 画布中的简单按钮

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

Path2d 可能很有趣，尽管它是实验性的：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath

基本上，您会将所有绘图都放入一个路径中，然后使用 .isPointInPath 方法进行检查。对于您所描述的矩形，您可以非常简单地进行数学运算，但这样做的好处是您可以设置复杂的路径，它会为您进行碰撞检测：

//get canvas/context
const canvas = document.getElementById("myCanvas")
const context = canvas.getContext("2d")

//create your shape data in a Path2D object
const path = new Path2D()
path.rect(250, 350, 200, 100)
path.rect(25,72,32,32)
path.closePath()

//draw your shape data to the context
context.fillStyle = "#FFFFFF"
context.fillStyle = "rgba(225,225,225,0.5)"
context.fill(path)
context.lineWidth = 2
context.strokeStyle = "#000000"
context.stroke(path)

function getXY(canvas, event){ //adjust mouse click to canvas coordinates
  const rect = canvas.getBoundingClientRect()
  const y = event.clientY - rect.top
  const x = event.clientX - rect.left
  return {x:x, y:y}
}

document.addEventListener("click",  function (e) {
  const XY = getXY(canvas, e)
  //use the shape data to determine if there is a collision
  if(context.isPointInPath(path, XY.x, XY.y)) {
    // Do Something with the click
    alert("clicked in rectangle")
  }
}, false)

jsFiddle

Answer 2

你的想法是对的。
您可以通过多种方式解决此问题，例如使用 cmets 中建议的 html 按钮。

但如果您确实需要处理画布内的点击事件，您可以执行以下操作：

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

//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