canvas点击事件
- 前端
- 三生万物
- 0
效果:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas点击</title>
</head>
<body>
<canvas></canvas>
<script>
(function(window) {
var document = window.document;
var clientW = window.innerWidth;
var clientH = window.innerHeight;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = clientW;
canvas.height = clientH;
var drawData = []; // 存数据
// 添加数据
function addData() {
for (var i = 0; i < 10; i++) {
var data = {
id: i,
type: 'arc',
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 50 + 20
};
drawData.push(data);
}
}
// 画圆
function drawCircle() {
addData();
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < drawData.length; i++) {
drawSingleCircle(i);
}
}
drawCircle();
// 画单个圆
function drawSingleCircle(i) {
ctx.beginPath();
ctx.arc(drawData[i].x, drawData[i].y, drawData[i].radius, 0, Math.PI * 2, true);
ctx.fillStyle = '#000';
ctx.fill();
ctx.closePath();
}
// 重新绘制(点击事件中需要用到)
var changedArr = []; // 防重复
function reDraw(x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < drawData.length; i++) {
drawSingleCircle(i);
if (ctx.isPointInPath(x, y) && changedArr.length === 0) {
changedArr.push(i);
changeStatus(i)
}
}
changedArr = [];
}
// 如果在事件触发的范围内,可以做一些事情来改变状态
function changeStatus(i) {
ctx.fillStyle = "#f00";
ctx.fill();
console.log(drawData[i].type);
console.log('你点击了第' + i + '个');
}
// 点击事件处理函数
function onClick(event) {
var e = event || window.event;
var x = e.clientX - canvas.getBoundingClientRect().left;
var y = e.clientY - canvas.getBoundingClientRect().top;
reDraw(x, y);
}
// 注册点击事件
canvas.addEventListener('click', onClick, false);
})(window);
</script>
</body>
</html>
主要使用 isPointInPath 是判断坐标是否在绘制的区域内
参考链接:https://www.cnblogs.com/qianduanjingying/p/6197561.html
免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。