Die Methode „clip()“ in Canvas wird verwendet, um beliebige Formen und Größen aus der ursprünglichen Leinwand auszuschneiden. Sobald ein Bereich abgeschnitten ist, sind alle nachfolgenden Zeichnungen auf den abgeschnittenen Bereich beschränkt (auf andere Bereiche auf der Leinwand kann nicht zugegriffen werden).
Sie können den aktuellen Canvas-Bereich auch speichern, indem Sie die Methode save() verwenden, bevor Sie die Methode clip() verwenden, und ihn in der Zukunft jederzeit über die Methode restart() wiederherstellen.
Als nächstes verwenden Sie die Methode „clip()“, um einen Suchscheinwerfereffekt zu erzielen.
</iframe><button id=btn>Transformieren</button><button id=con>Pause</button><canvas id=canvas width=400 height=290 style=border:1px solid black>Der aktuelle Browser funktioniert nicht Unterstütze es Canvas, bitte ändere den Browser und versuche es erneut</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume'; }else{ this.innerHTML = 'pause'; }} var canvas = document.getElementById('canvas'); //Speicher-Canvas-Breite und -Höhe var H=290,W=400; //Speicher-Suchscheinwerfer var ball = {}; //Speicherfotoadresse var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; function initial(){ .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) 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.onload = function(){ cxt.drawImage(IMG,0,0 }//Willkommen beim Beitritt Stack-Entwicklungsaustausch Gemeinsam im Kreis lernen und kommunizieren: 582735936 ]//Für 1-3 Front-End-Mitarbeiter} //Helfen Sie, technische Engpässe zu überwinden und Denkfähigkeiten zu verbessern} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; BumpTest(Ball);} Funktion BumpTest(ele){ //linke Seite if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX; } //Rechte Seite if(ele.x >= W - ele.r){ ele.x = W - ele.stepX } //Obere Seite if(ele.y <= ele.r){ ele.y = ele.r; ele.stepY = -ele.stepY } //Untere Seite if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Setzen Sie die Leinwandhöhe zurück, um den Effekt des Löschens der Leinwand zu erzielen. if(canvas.getContext){ var cxt = canvas.getContext('2d'); //Den Canvas-Hintergrund schwärzen cxt.fillRect ( 0,0,W,H); //Suchlicht rendern cxt.beginPath(); cxt.arc(ball.x,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.clip(); Ohne Clip() erscheint das Canvas-Hintergrundbild im Clip()-Bereich cxt.drawImage(IMG,0,0); }//Willkommen im Full-Stack-Entwicklungsaustauschkreis, um gemeinsam zu lernen und zu kommunizieren: 582735936 ]//Für 1-3 Front-End-Mitarbeiter} //Helfen Sie dabei, technische Engpässe zu überwinden und Ihre Denkfähigkeiten zu verbessern}} initial();clearInterval (oTimer); function fnInterval( ){ //Bewegungsstatus aktualisieren(); //Render render( } var oTimer = setInterval(fnInterval,50);Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.