La toile obtient un effet projecteur

Cet article présente un exemple d'utilisation de la méthode clip() pour obtenir un effet de projecteur. Il a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur

La méthode clip() dans. La toile est utilisée pour dessiner à partir de n'importe quelle forme et taille à partir de la toile d'origine. Une fois qu'une zone est découpée, tous les dessins suivants seront limités à la zone découpée (les autres zones du canevas ne sont pas accessibles)

Vous pouvez également utiliser save avant d'utiliser la méthode clip() () pour enregistrer le courant zone de canevas et la restaure à tout moment dans le futur grâce à la méthode restaurer()

Ensuite, utilisez la méthode clip() pour obtenir un effet de projecteur

<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 == &#39;暂停&#39;){
  this.innerHTML = &#39;恢复&#39;;
  clearInterval(oTimer);
 }else{
  this.innerHTML = &#39;暂停&#39;; 
  oTimer = setInterval(fnInterval,50);
 }
}
var canvas = document.getElementById(&#39;canvas&#39;);
//存储画布宽高
var H=290,W=400;
//存储探照灯
var ball = {};
//存储照片
var IMG;
//存储照片地址
var URL = &#39;http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg&#39;;
function initial(){
 if(canvas.getContext){
  var cxt = canvas.getContext(&#39;2d&#39;);
  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(&#39;img&#39;);
  IMG.src=URL;
  IMG.onload = function(){
   cxt.drawImage(IMG,0,0);
  } 
 } 
}
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(&#39;2d&#39;);
  cxt.save();
  //将画布背景涂黑
  cxt.beginPath();
  cxt.fillStyle = &#39;#000&#39;;
  cxt.fillRect(0,0,W,H);
  //渲染探照灯
  cxt.beginPath();
  cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
  cxt.fillStyle = &#39;#000&#39;;
  cxt.fill(); 
  cxt.clip();  
  //由于使用了clip()，画布背景图片会出现在clip()区域内
  cxt.drawImage(IMG,0,0);
  cxt.restore();
 }
}
initial();
clearInterval(oTimer);
function fnInterval(){
 //更新运动状态
 update();
 //渲染
 render(); 
}
var oTimer = setInterval(fnInterval,50);
</script>

Pour plus d'articles sur l'obtention d'un effet projecteur sur Canvas, veuillez faire attention au site Web PHP chinois !