canvas 上添加事件绑定 |
您所在的位置：网站首页 › canvas添加按钮点击事件 › canvas 上添加事件绑定 |
|
Canvas 画布上绘制的视频图片等，因为均不是节点，我们也就无法获取图片的 DOM 节点来进行操作和添加事件。画布上绘制的图像，本质上只能看到却“摸”不到。那么怎么给画布上的东西添加监听事件那？ 一、利用定位覆盖思路：canvas标签的父亲固定定位，canvas标签绝对定位且canvas标签撑满父盒子，canvas标签的父盒子还有子元素，这些子元素绝对定位就可以覆盖在canvas画布上。 当canvas 上需要实现类似的点击事件，就可以使用 canvas 标签父盒子里面的子元素，定位覆盖点击区域。实现canvas 画布上类似的DOM操作。 画布点击事件 Document 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; } 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}`); }当画布上需要移动拖拽东西时，也可以实现移动拖拽： 画布移动拖拽模型 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 来计算鼠标的距离画布左上角的水平和垂直距离。现在我们只需要判断画布上的色块的坐标能包住鼠标的坐标，条件成立时，添加对应的事件，这时候你想怎么玩画布上的内容都行。 全局监听局部响应源代码： Document body{ background-color: #BA7271; } canvas{ position: absolute; left: 50%; top: 10%; transform:translate(-300px); background-color: #fff; } 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("不知道我是第二个方块呀，点我！"); } } 总结两个方法，没有好坏之分，都能用。第二个方法相对与第一个的好处就是只进行 JS 代码的操作。在开发的时候因为代码写在一处可能比较方便。 今天比较发现了一个好的博客，看了一下午了。看的时候给人的感觉真的很棒，内心是真的特别满足。但是看完后特别失落落的感觉，都怪看的时候期望太高了，内心比较浮躁，内心深处暗示自己，以为看完以后就能有多厉害了，谁知看完一切未变，落差就来了，这样看来自己的阅读习惯并不是太好，我能保证每天的碎片化阅读，但是突然来一次深度阅读就有点不能自我了，提了不止一遍了，尽量把阅读常态化。这样才能降低胡思乱想的期望，达到平常心的对待阅读。 也不吝啬，下午看的几个好博客拿出来： 博客志 - 优秀个人独立博客导航 http://www.jetli.com.cn/ 优秀个人独立博客文章收藏 - 博客志 http://www.jetli.com.cn/good.html Blogval - 优质博文推送 http://cn.blogval.com/下午还看到一本特好的书「中央帝国的财经密码」 这书听过很多次，有几次看公众号也有博主推荐，今天索性看了，两章写的真好，从汉一直写到清末，虽然只写了这一点，当给人的感觉，这两千年的帝国历史仿佛和当代中国联系在一起，帝国经济自汉到唐建立之后，经济的基础就从未动摇过，一直延续到当代。历史有时候让人摸不着头脑，有时候又主干特别清楚。不管如何能够启迪自己就行。 2019.07.15 21.26 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |