如何在Canvas上的图形/图像绑定事件监听的实现
|
HTML中只能为元素/标签绑定监听函数； Canvas画图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接举办变乱绑定。 办理步伐：“变乱委托”——让canvas监听全部的变乱，计较变乱产生坐标点，是否处于某个图形/图像的范畴内。 对付尺度几许图形可以举办变乱绑定； 对付不尺度几许图形举办变乱绑定很是贫困。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas绘制音乐播放器</title> <style> #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; } </style> </head> <body> <canvas id="can1" width="300px" height="500px"></canvas> <audio src=http://www.jb51.net/html5/"voice/珍惜_孙露.mp3" id="audio"></audio> <input type="range" min="0" max="1000" value="0" id="range1"/> <input type="range" min="0" max="10" step="1" value="3" id="range2"/> </body> <script> 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.onload=function(){//配景图片加载完成,判定是否全部图片加载完成,是-->开始绘图 progress+=20; (progress==60)&&star(); } img1.onload=function(){//配景图片加载完成,判定是否全部图片加载完成,是-->开始绘图 progress+=20; (progress==60)&&star(); } img2.onload=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.onclick=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.onchange=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.onchange=function(){ audio.volume=range2.value/10; } </script> </html> 到此这篇关于如安在Canvas上的图形/图像绑定变乱监听的实现的文章就先容到这了,更多相干Canvas图像绑定变乱监听内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
