html5 简单的控件,HTML5画布中的简单按钮

A1rPun..

11

你正在思考正确的方向.

您可以使用注释中建议的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);