HTML中只能為元素/標簽綁定監聽函數；

Canvas繪圖中只有一個元素-canvas，每一個圖形/圖像都不是元素，不能直接進行事件綁定。

解決辦法：“事件委托”——讓canvas監聽所有的事件，計算事件發生坐標點，是否處于某個圖形/圖像的范圍內。

對于標準幾何圖形可以進行事件綁定；

對于不標準幾何圖形進行事件綁定非常麻煩。

canvas繪制音樂播放器

#range1,#range2{

height:3px;

position: relative;

border: 0;

outline: 0;

box-shadow: 0 3px #300 inset;

}

#range1{

width:250px;

left:-275px;

top:-10px;

}

#range2{

transform:rotate(-90deg);

width:50px;

left:-320px;

top:-50px;

}

var ctx1=can1.getContext('2d');

var img=new Image();

var img1=new Image();

var img2=new Image();

img.src="img/bg.jpg";//繪圖背景//必須放在img1,img2前賦值,否則會蓋住

img1.src="img/loop.jpg";

img2.src="img/play1.png";

var progress=0;//設置權重，判斷所有圖片是否加載完成

img.οnlοad=function(){//背景圖片加載完成,判斷是否所有圖片加載完成,是-->開始畫圖

progress+=20;

(progress==60)&&star();

}

img1.οnlοad=function(){//背景圖片加載完成,判斷是否所有圖片加載完成,是-->開始畫圖

progress+=20;

(progress==60)&&star();

}

img2.οnlοad=function(){//背景圖片加載完成,判斷是否所有圖片加載完成,是-->開始畫圖

progress+=20;

(progress==60)&&star();

}

//開始畫圖

function star(){

ctx1.drawImage(img,0,0,300,500);//繪背景圖

loop();//繪制循環圖 img1

ctx1.drawImage(img2,100,350,100,100);//繪圖2

}

//循環事件,點擊事件的全局變量

var i=0;

var time=null;

var ispause=true;

//循環函數

function loop(){

ctx1.save();//保存畫筆當前狀態

ctx1.translate(150,165);//平移

ctx1.rotate(i*Math.PI/180);//旋轉

ctx1.drawImage(img1,-65,-65);//繪圖

ctx1.restore();//復位畫筆之前的狀態

//繪畫兩個圓

ctx1.strokeStyle="#000";

ctx1.lineWidth=20;

ctx1.arc(150,165,85,0,2*Math.PI);

ctx1.stroke();

ctx1.beginPath();

ctx1.strokeStyle="#303";

ctx1.lineWidth=10;

ctx1.arc(150,165,75,0,2*Math.PI);

ctx1.stroke();

i+=10;

(i>=360)&&(i=0);

}

//點擊事件

can1.οnclick=function(e){

var x= e.offsetX;

var y= e.offsetY;

//console.log(x,y);

if((x-150)*(x-150)+(y-400)*(y-400)<=50*50*Math.PI){

//console.log("我是圓");

if(ispause){

audio.play();

ispause=false;

img2.src="img/pause1.png";

time=setInterval(loop,100);

}else{

audio.pause();

//clearInterval(time);

//ispause=true;

//img2.src="img/play.png";

}

}

//定時器,監聽音樂是否播放完成，主要為了音樂播放完成停止

setInterval(function(){

if(audio.paused){

ispause=true;

clearInterval(time);

img2.src="img/play1.png";

}

},5);

}

//進度條改變事件--進度

range1.οnchange=function(){//當前進度=音樂總時長*range當前值/range最大value值

audio.currentTime=parseFloat(range1.value*audio.duration/range1.max);

}

//監聽音樂當前播放進度，時間低進度條改變事件失效(來不及改變)

setInterval("range1.value=parseFloat(range1.max*audio.currentTime/audio.duration);",400);

//進度條改變事件--音量

audio.volume=0.3;

range2.οnchange=function(){

audio.volume=range2.value/10;

}

到此這篇關于如何在Canvas上的圖形/圖像綁定事件監聽的實現的文章就介紹到這了,更多相關Canvas圖像綁定事件監聽內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的html怎么给没张图片添加单击事件,如何在Canvas上的图形/图像绑定事件监听的实现...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。