数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法学如何将简单的 onClick 事件处理程序添加到 HTML5 画布元素？
在画布元素中绘制的元素没有图像。它们唯一的图像就是它们使用的像素和颜色。绘制画布元素意味着在立即模式下绘制位图。若要获得画布元素（形状）上的单击事件，您需要在画布 HTML 元素上捕捉单击事件并确定单击了哪个元素。这需要存储元素的宽度和高度。
若要将单击事件添加到您的画布元素，请使用以下代码
canvas.addEventListener('click', function() { }, false);举例
若要确定单击了哪个元素，请使用以下代码段 -
var e = document.getElementById('myCanvas'),
elemLeft = e.offsetLeft,
elemTop = e.offsetTop,
context = e.getContext('2d'),
elements = [];
// event listener for click event
e.addEventListener('click', function(event) {
var xVal = event.pageX - elemLeft,
yVal = event.pageY - elemTop;
console.log(xVal, yVal);
elements.forEach(function(ele) {
if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) {
alert(‘element clicked');
}
});
}, false);
elements.push({
colour: '#1C2128’,
width: 250,
height: 200,
top: 30,
left: 20
});
elements.forEach(function(ele) {
context.fillStyle = element.colour;
context.fillRect(ele.left, ele.top, ele.width, ele.height);
});
更新时间: 2020 年 3 月 4 日
5 千次以上浏览
广告