canvas中的clip()方法用於從原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則所有之後的繪圖都會被限制在被剪切的區域內(不能訪問畫布上的其他區域)
也可以在使用clip()方法前透過使用save()方法對目前畫布區域進行保存，並在以後的任何時間透過restore()方法進行恢復
接下來使用clip()方法實作一個探照燈效果
</iframe><button id=btn>變換</button><button id=con>暫停</button><canvas id=canvas width=400 height=290 style=border:1px solid black>目前瀏覽器不支援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); }} var canvas = document.getElementById('canvas'); //儲存畫布寬高var H=290,W=400; //儲存探照燈var ball = {}; //儲存照片var IMG; //儲存照片位址var URL = ' http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; function initial(){ if(canvas.getContext){ var cxt = canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); var tempX = Math.floor(Math.random()*(W-tempR) + tempR ); var tempY = 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年前端人員} //幫助突破技術瓶頸，提升思維能力} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; bumpTest(ball);} function bumpTest(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; }} function render(){ //重置畫布高度，達到清空畫布的效果canvas.height = H; if(canvas.getContext){ var cxt = 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); function fnInterval( ){ //更新運動狀態update(); //渲染render(); } var oTimer = setInterval(fnInterval,50); </script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。