我是 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 坐标和鼠标位置才能在矩形区域中单击。但我真的被困在这一点上。 这可能真的很简单和合乎逻辑,但我们都必须走过这个阶段。
最佳答案
您的思考方向是正确的。
您可以通过多种方式解决这个问题,例如使用评论中建议的 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
关于javascript - HTML5 Canvas 中的简单按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24384368/