前端开发中如何通过Canvas实现绑定事件监听
本篇内容介绍了“前端开发中如何通过Canvas实现绑定事件监听”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
HTML中只能为元素/标签绑定监听函数;Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定。
解决办法:“事件委托”——让canvas监听所有的事件,计算事件发生坐标点,是否处于某个图形/图像的范围内。
对于标准几何图形可以进行事件绑定;
对于不标准几何图形进行事件绑定非常麻烦。
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>canvas绘制音乐播放器</title><style>#range1,#range2{height:3px;position:relative;border:0;outline:0;box-shadow:03px#300inset;}#range1{width:250px;left:-275px;top:-10px;}#range2{transform:rotate(-90deg);width:50px;left:-320px;top:-50px;}</style></head><body><canvasid="can1"width="300px"height="500px"></canvas><audiosrc="voice/珍惜_孙露.mp3"id="audio"></audio><inputtype="range"min="0"max="1000"value="0"id="range1"/><inputtype="range"min="0"max="10"step="1"value="3"id="range2"/></body><script>varctx1=can1.getContext('2d');varimg=newImage();varimg1=newImage();varimg2=newImage();img.src="img/bg.jpg";//绘图背景//必须放在img1,img2前赋值,否则会盖住img1.src="img/loop.jpg";img2.src="img/play1.png";varprogress=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();}//开始画图functionstar(){ctx1.drawImage(img,0,0,300,500);//绘背景图loop();//绘制循环图img1ctx1.drawImage(img2,100,350,100,100);//绘图2}//循环事件,点击事件的全局变量vari=0;vartime=null;varispause=true;//循环函数functionloop(){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){varx=e.offsetX;vary=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实现绑定事件监听”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。