这篇文章主要介绍“html5如何实现canvas探照灯效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5如何实现canvas探照灯效果”文章能帮助大家解决问题。

canvas 中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)

也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存，并在以后的任意时间通过restore()方法对其进行恢复

接下来使用clip()方法实现一个探照灯效果

</iframe><buttonid="btn">变换</button><buttonid="con">暂停</button><canvasid="canvas"width="400"height="290">当前浏览器不支持canvas，请更换浏览器后再试</canvas><script>btn.onclick=function(){history.go();}con.onclick=function(){if(this.innerHTML=='暂停'){this.innerHTML='恢复';clearInterval(oTimer);}else{this.innerHTML='暂停';oTimer=setInterval(fnInterval,50);}}varcanvas=document.getElementById('canvas');//存储画布宽高varH=290,W=400;//存储探照灯varball={};//存储照片varIMG;//存储照片地址varURL='http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg';functioninitial(){if(canvas.getContext){varcxt=canvas.getContext('2d');vartempR=Math.floor(Math.random()*30+20);vartempX=Math.floor(Math.random()*(W-tempR)+tempR);vartempY=Math.floor(Math.random()*(H-tempR)+tempR)ball={x:tempX,y:tempY,r:tempR,stepX:Math.floor(Math.random()*21-10),stepY:Math.floor(Math.random()*21-10)};IMG=document.createElement('img');IMG.src=URL;IMG.onload=function(){cxt.drawImage(IMG,0,0);　　}//欢迎加入全栈开发交流圈一起学习交流：582735936　　]//面向1-3年前端人员　　}//帮助突破技术瓶颈，提升思维能力}}}functionupdate(){ball.x+=ball.stepX;ball.y+=ball.stepY;bumpTest(ball);}functionbumpTest(ele){//左侧if(ele.x<=ele.r){ele.x=ele.r;ele.stepX=-ele.stepX;}//右侧if(ele.x>=W-ele.r){ele.x=W-ele.r;ele.stepX=-ele.stepX;}//上侧if(ele.y<=ele.r){ele.y=ele.r;ele.stepY=-ele.stepY;}//下侧if(ele.y>=H-ele.r){ele.y=H-ele.r;ele.stepY=-ele.stepY;}}functionrender(){//重置画布高度，达到清空画布的效果canvas.height=H;if(canvas.getContext){varcxt=canvas.getContext('2d');cxt.save();//将画布背景涂黑cxt.beginPath();cxt.fillStyle='#000';cxt.fillRect(0,0,W,H);//渲染探照灯cxt.beginPath();cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);cxt.fillStyle='#000';cxt.fill();cxt.clip();//由于使用了clip()，画布背景图片会出现在clip()区域内cxt.drawImage(IMG,0,0);cxt.restore();　　}//欢迎加入全栈开发交流圈一起学习交流：582735936　　]//面向1-3年前端人员　　}//帮助突破技术瓶颈，提升思维能力}}initial();clearInterval(oTimer);functionfnInterval(){//更新运动状态update();//渲染render();}varoTimer=setInterval(fnInterval,50);</script>

关于“html5如何实现canvas探照灯效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。