資料結構
網路
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 千次以上瀏覽
廣告