canvas 自适应屏幕后鼠标点击按钮事件如何自适应
时间: 2023-07-22 07:38:46 浏览: 191
要实现鼠标点击按钮事件自适应屏幕,可以使用以下方法:
1. 使用 JavaScript 监听鼠标点击事件,并获取点击位置的坐标。
2. 根据 canvas 的尺寸和位置计算出 canvas 的相对坐标。
3. 判断点击位置是否在按钮的范围内,如果是,则触发按钮的点击事件。
4. 如果希望按钮的位置也能够自适应屏幕,可以在页面加载或窗口大小改变时重新计算按钮的位置和大小。
示例代码如下:
```
// 获取 canvas 元素和按钮元素
const canvas = document.getElementById('canvas');
const button = document.getElementById('button');
// 监听鼠标点击事件
canvas.addEventListener('mousedown', function(event) {
// 获取点击位置的坐标
const x = event.clientX;
const y = event.clientY;
// 计算 canvas 的相对坐标
const rect = canvas.getBoundingClientRect();
const canvasX = x - rect.left;
const canvasY = y - rect.top;
// 判断是否在按钮的范围内
const buttonRect = button.getBoundingClientRect();
if (canvasX >= buttonRect.left && canvasX <= buttonRect.right &&
canvasY >= buttonRect.top && canvasY <= buttonRect.bottom) {
// 触发按钮的点击事件
button.click();
}
});
// 窗口大小改变时重新计算按钮的位置和大小
window.addEventListener('resize', function() {
const rect = canvas.getBoundingClientRect();
const buttonRect = button.getBoundingClientRect();
button.style.left = (buttonRect.left - rect.left) * 100 / rect.width + '%';
button.style.top = (buttonRect.top - rect.top) * 100 / rect.height + '%';
button.style.width = buttonRect.width * 100 / rect.width + '%';
button.style.height = buttonRect.height * 100 / rect.height + '%';
});
```
阅读全文