如何向 HTML5 Canvas 元素添加简单的 onClick 事件处理程序?
htmlweb developmentfront end technology更新于 2025/8/18 9:48:17
在 Canvas 元素中绘制的元素没有任何表示形式。它们唯一的表示形式是它们使用的像素和颜色。绘制到 Canvas 元素意味着在立即模式下绘制位图。要获取 Canvas 元素(形状)上的点击事件，您需要捕获 Canvas HTML 元素上的点击事件并确定哪个元素被点击。这需要存储元素的宽度和高度。
要向 Canvas 元素添加点击事件，请使用以下代码
canvas.addEventListener("click", function() { }, false);
示例
要确定点击了哪个元素，请使用以下代码片段 −
var e = document.getElementById('myCanvas'),
elemLeft = e.offsetLeft,
elemTop = e.offsetTop,
context = e.getContext('2d'),
elements = [];
// 点击事件的事件监听器
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);
});
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
