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

你正在思考正确的方向.
您可以使用注释中建议的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