Canvas 画布上绘制的视频图片等，因为均不是节点，我们也就无法获取图片的 DOM 节点来进行操作和添加事件。画布上绘制的图像，本质上只能看到却“摸”不到。那么怎么给画布上的东西添加监听事件那？
一、利用定位覆盖
思路：canvas标签的父亲固定定位，canvas标签绝对定位且canvas标签撑满父盒子，canvas标签的父盒子还有子元素，这些子元素绝对定位就可以覆盖在canvas画布上。
当canvas 上需要实现类似的点击事件，就可以使用 canvas 标签父盒子里面的子元素，定位覆盖点击区域。实现canvas 画布上类似的DOM操作。
画布点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #BA7271;
}
canvas{
position: absolute;
left: 50%;
top: 0;
transform:translate(-300px);
background-color: #fff;
}
div{
position: relative;
width: 600px;
height: 500px;
margin:30px auto;
}
main{
background-color: #0f0;
position: absolute;
width: 100px;
height: 100px;
left: 100px;
top: 100px;
}
aside{
background-color: #f00;
position: absolute;
width: 100px;
height: 100px;
left: 300px;
top: 100px;
}
</style>
</head>
<body>
<div>
<canvas width="600" height="500"></canvas>
<main></main>
<aside></aside>
</div>
<script>
var m = document.querySelector("main");
var n = document.querySelector("aside");
m.onclick = function(event){
var x = event.offsetX;
var y = event.offsetY;
alert(`鼠标在颜色块的坐标：${x} 和 ${y}`);
}
n.onclick = function(event){
var x = event.offsetX;
var y = event.offsetY;
alert(`鼠标在颜色块的坐标：${x} 和 ${y}`);
}
</script>
</body>
</html>
当画布上需要移动拖拽东西时，也可以实现移动拖拽：
画布移动拖拽模型
var m = document.querySelector("main");
var n = document.querySelector("aside");
m.onmousedown = function(event){
var starX = event.clientX - m.offsetLeft;
var starY = event.clientY - m.offsetTop;
document.onmousemove = function(event){
var x = event.clientX - starX;
var y = event.clientY - starY;
m.style.left = `${x}px`;
m.style.top = `${y}px`;
}
}
n.onmousedown = function(event){
var starX = event.clientX - n.offsetLeft;
var starY = event.clientY - n.offsetTop;
document.onmousemove = function(event){
var x = event.clientX - starX;
var y = event.clientY - starY;
n.style.left = `${x}px`;
n.style.top = `${y}px`;
}
}
document.onmouseup = function(event){
document.onmousemove = null;
}
二、全局监听局部响应
思路：现在只有一个 canvas 标签了。要进行 DOM 操作添加事件只能给画布这个 DOM 节点添加事件，那索性我们就给DOM节点添加事件。然后通过鼠标的 event 来计算鼠标的距离画布左上角的水平和垂直距离。现在我们只需要判断画布上的色块的坐标能包住鼠标的坐标，条件成立时，添加对应的事件，这时候你想怎么玩画布上的内容都行。
全局监听局部响应
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #BA7271;
}
canvas{
position: absolute;
left: 50%;
top: 10%;
transform:translate(-300px);
background-color: #fff;
}
</style>
</head>
<body>
<canvas width="600" height="500"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 画上两个正方形
ctx.fillStyle = "#f00";
var x1 = 100;
var y1 = 100;
var x2 = 300;
var y2 = 200;
var width = 100;
var height = 100;
ctx.fillRect(x1,y1,width,height);
ctx.fillStyle = "#0ff";
ctx.fillRect(x2,y2,width,height);
// 全局监听
myCanvas.onclick = function(event){
console.log("全局监听");
var x = event.offsetX;
var y = event.offsetY;
// 局部响应，第一个方块
if(x > x1 && x < x1 + width && y > y1 && y < y1 + height){
alert("点我干嘛！");
}
// 局部响应，第二个方块
if(x > x2 && x < x2 + width && y > y2 && y < y2 + height){
alert("不知道我是第二个方块呀，点我！");
}
}
</script>
</body>
</html>
总结
两个方法，没有好坏之分，都能用。第二个方法相对与第一个的好处就是只进行 JS 代码的操作。在开发的时候因为代码写在一处可能比较方便。
今天比较发现了一个好的博客，看了一下午了。看的时候给人的感觉真的很棒，内心是真的特别满足。但是看完后特别失落落的感觉，都怪看的时候期望太高了，内心比较浮躁，内心深处暗示自己，以为看完以后就能有多厉害了，谁知看完一切未变，落差就来了，这样看来自己的阅读习惯并不是太好，我能保证每天的碎片化阅读，但是突然来一次深度阅读就有点不能自我了，提了不止一遍了，尽量把阅读常态化。这样才能降低胡思乱想的期望，达到平常心的对待阅读。
也不吝啬，下午看的几个好博客拿出来：
- 博客志 - 优秀个人独立博客导航 http://www.jetli.com.cn/
- 优秀个人独立博客文章收藏 - 博客志 http://www.jetli.com.cn/good.html
- Blogval - 优质博文推送 http://cn.blogval.com/
下午还看到一本特好的书「中央帝国的财经密码」 这书听过很多次，有几次看公众号也有博主推荐，今天索性看了，两章写的真好，从汉一直写到清末，虽然只写了这一点，当给人的感觉，这两千年的帝国历史仿佛和当代中国联系在一起，帝国经济自汉到唐建立之后，经济的基础就从未动摇过，一直延续到当代。历史有时候让人摸不着头脑，有时候又主干特别清楚。不管如何能够启迪自己就行。
2019.07.15 21.26
网友评论