O método clip() no canvas é usado para cortar formas e tamanhos arbitrários do canvas original. Depois que uma área for cortada, todos os desenhos subsequentes serão limitados à área cortada (outras áreas na tela não poderão ser acessadas)
Você também pode salvar a área atual da tela usando o método save() antes de usar o método clip() e restaurá-la a qualquer momento no futuro por meio do método restore().
Em seguida, use o método clip() para obter um efeito de holofote.
</iframe><button id=btn>Transformar</button><button id=con>Pausar</button><canvas id=canvas width=400 height=290 style=border:1px solid black>O navegador atual não suporte ao canvas, mude o navegador e tente novamente</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume'; clearInterval(oTimer); document.getElementById('canvas'); //Largura e altura da tela de armazenamento var H=290,W=400; {}; //Armazenamento de fotos var IMG; //Armazenamento de endereço de foto var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = canvas.getContext('2d'); = Math.floor(Math.random()*(W-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); troca de desenvolvimento de pilha Aprenda e comunique-se juntos no círculo: 582735936 ]//Para 1-3 funcionários de front-end} //Ajude a romper gargalos técnicos e melhorar as habilidades de pensamento} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; bumpTest(ball);} function bumpTest(ele){ //lado esquerdo if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX } //Lado direito if(ele.x >= W - ele.r){ ele.x = W - ele.stepX = -ele.stepX }; //Lado superior if(ele.y <= ele.r){ ele.y = ele.r; ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Redefinir a altura da tela para obter o efeito de limpar a tela canvas.height = H; if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.save(); //Escurecer o fundo da tela cxt.beginPath(); 0,0,W,H); //Renderizar holofote cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); use Sem clip(), a imagem de fundo da tela aparecerá na área clip() cxt.drawImage(IMG,0,0); }//Bem-vindo ao círculo de intercâmbio de desenvolvimento full-stack para aprender e se comunicar juntos: 582735936 ]//Para 1-3 funcionários de front-end} //Ajude a superar gargalos técnicos e melhorar as habilidades de pensamento}} inicial();clearInterval (oTimer); function fnInterval(){ //Atualização do status do movimento(); //Renderização render();O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.