La méthode clip() dans Canvas est utilisée pour couper des formes et des tailles arbitraires à partir du canevas d'origine. Une fois qu'une zone est découpée, tous les dessins ultérieurs seront limités à la zone découpée (les autres zones du canevas ne sont pas accessibles)
Vous pouvez également enregistrer la zone de canevas actuelle en utilisant la méthode save() avant d'utiliser la méthode clip() et la restaurer à tout moment dans le futur via la méthode restaurer().
Ensuite, utilisez la méthode clip() pour obtenir un effet de projecteur.
</iframe><button id=btn>Transformer</button><button id=con>Pause</button><canvas id=canvas width=400 height=290 style=border:1px solid black>Le navigateur actuel ne le fait pas prend en charge le canevas, veuillez changer de navigateur et réessayer</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume'; clearInterval(oTimer); }else{ this.innerHTML = 'pause'; document.getElementById('canvas'); //Largeur et hauteur de la toile de stockage var H=290,W=400 //Projecteur de stockage var ball = {}; //Stockage des photos var IMG; //Adresse de la photo de stockage var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); = Math.floor(Math.random()*(W-tempR) + tempR); var tempY = Math.floor(Math.random()*(H-tempR) + tempR) balle = { 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); échange de développement de pile Apprenez et communiquez ensemble dans le cercle : 582735936 ]//Pour 1 à 3 membres du personnel front-end} //Aidez à surmonter les goulots d'étranglement techniques et à améliorer les capacités de réflexion} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; bumpTest(ball);} function bumpTest(ele){ //côté gauche if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX; } //Côté droit if(ele.x >= W - ele.r){ ele.x = W - ele.stepX = -ele.stepX } //Côté supérieur if(ele.y <= ele.r){ ele.y = ele.r; ele.stepY = -ele.stepY; } //Côté inférieur if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Réinitialise la hauteur du canevas pour obtenir l'effet d'effacement du canevas. if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.save(); //Noircir l'arrière-plan du canevas cxt.beginPath(); 0,0,W,H); //Rendu le projecteur cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.fill(); utiliser Sans clip(), l'image d'arrière-plan du canevas apparaîtra dans la zone clip() cxt.drawImage(IMG,0,0); }//Bienvenue pour rejoindre le cercle d'échange de développement full-stack pour apprendre et communiquer ensemble : 582735936 ]//Pour 1 à 3 personnels front-end} //Aidez à surmonter les goulots d'étranglement techniques et à améliorer les capacités de réflexion}} initial();clearInterval (oTimer); function fnInterval( ){ //Mettre à jour l'état du mouvement(); //Render render( } var oTimer = setInterval(fnInterval,50);Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.