Canvas 畫布上繪制的視頻圖片等越走，因為均不是節(jié)點(diǎn)澜汤，我們也就無法獲取圖片的 DOM 節(jié)點(diǎn)來進(jìn)行操作和添加事件械筛。畫布上繪制的圖像稠诲，本質(zhì)上只能看到卻“摸”不到侦鹏。那么怎么給畫布上的東西添加監(jiān)聽事件那诡曙？
一、利用定位覆蓋
思路：canvas標(biāo)簽的父親固定定位略水，canvas標(biāo)簽絕對定位且canvas標(biāo)簽撐滿父盒子价卤，canvas標(biāo)簽的父盒子還有子元素，這些子元素絕對定位就可以覆蓋在canvas畫布上渊涝。
當(dāng)canvas 上需要實(shí)現(xiàn)類似的點(diǎn)擊事件慎璧，就可以使用 canvas 標(biāo)簽父盒子里面的子元素，定位覆蓋點(diǎn)擊區(qū)域跨释。實(shí)現(xiàn)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(`鼠標(biāo)在顏色塊的坐標(biāo)：${x} 和 ${y}`);
}
n.onclick = function(event){
var x = event.offsetX;
var y = event.offsetY;
alert(`鼠標(biāo)在顏色塊的坐標(biāo)：${x} 和 ${y}`);
}
</script>
</body>
</html>
當(dāng)畫布上需要移動拖拽東西時，也可以實(shí)現(xiàn)移動拖拽：
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;
}
二煤傍、全局監(jiān)聽局部響應(yīng)
思路：現(xiàn)在只有一個 canvas 標(biāo)簽了盖文。要進(jìn)行 DOM 操作添加事件只能給畫布這個 DOM 節(jié)點(diǎn)添加事件，那索性我們就給DOM節(jié)點(diǎn)添加事件蚯姆。然后通過鼠標(biāo)的 event 來計算鼠標(biāo)的距離畫布左上角的水平和垂直距離∥逍現(xiàn)在我們只需要判斷畫布上的色塊的坐標(biāo)能包住鼠標(biāo)的坐標(biāo)，條件成立時龄恋，添加對應(yīng)的事件疙驾，這時候你想怎么玩畫布上的內(nèi)容都行。
源代碼：
<!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);
// 全局監(jiān)聽
myCanvas.onclick = function(event){
console.log("全局監(jiān)聽");
var x = event.offsetX;
var y = event.offsetY;
// 局部響應(yīng)郭毕，第一個方塊
if(x > x1 && x < x1 + width && y > y1 && y < y1 + height){
alert("點(diǎn)我干嘛它碎！");
}
// 局部響應(yīng)，第二個方塊
if(x > x2 && x < x2 + width && y > y2 && y < y2 + height){
alert("不知道我是第二個方塊呀显押，點(diǎn)我扳肛！");
}
}
</script>
</body>
</html>
總結(jié)
兩個方法，沒有好壞之分乘碑，都能用挖息。第二個方法相對與第一個的好處就是只進(jìn)行 JS 代碼的操作。在開發(fā)的時候因為代碼寫在一處可能比較方便兽肤。
今天比較發(fā)現(xiàn)了一個好的博客套腹，看了一下午了∽收。看的時候給人的感覺真的很棒电禀，內(nèi)心是真的特別滿足。但是看完后特別失落落的感覺笤休，都怪看的時候期望太高了尖飞，內(nèi)心比較浮躁，內(nèi)心深處暗示自己，以為看完以后就能有多厲害了葫松，誰知看完一切未變瓦糕，落差就來了，這樣看來自己的閱讀習(xí)慣并不是太好腋么，我能保證每天的碎片化閱讀咕娄，但是突然來一次深度閱讀就有點(diǎn)不能自我了，提了不止一遍了珊擂，盡量把閱讀常態(tài)化圣勒。這樣才能降低胡思亂想的期望，達(dá)到平常心的對待閱讀摧扇。
也不吝嗇圣贸，下午看的幾個好博客拿出來：
- 博客志 - 優(yōu)秀個人獨(dú)立博客導(dǎo)航 http://www.jetli.com.cn/
- 優(yōu)秀個人獨(dú)立博客文章收藏 - 博客志 http://www.jetli.com.cn/good.html
- Blogval - 優(yōu)質(zhì)博文推送 http://cn.blogval.com/
下午還看到一本特好的書「中央帝國的財經(jīng)密碼」 這書聽過很多次，有幾次看公眾號也有博主推薦扛稽，今天索性看了吁峻，兩章寫的真好，從漢一直寫到清末在张，雖然只寫了這一點(diǎn)用含，當(dāng)給人的感覺，這兩千年的帝國歷史仿佛和當(dāng)代中國聯(lián)系在一起帮匾，帝國經(jīng)濟(jì)自漢到唐建立之后啄骇，經(jīng)濟(jì)的基礎(chǔ)就從未動搖過，一直延續(xù)到當(dāng)代瘟斜。歷史有時候讓人摸不著頭腦缸夹，有時候又主干特別清楚。不管如何能夠啟迪自己就行螺句。
2019.07.15 21.26
