Metode clip() di kanvas digunakan untuk memotong bentuk dan ukuran sembarang dari kanvas asli. Setelah suatu area terpotong, semua gambar selanjutnya akan dibatasi pada area yang terpotong (area lain di kanvas tidak dapat diakses)
Anda juga dapat menyimpan area kanvas saat ini dengan menggunakan metode save() sebelum menggunakan metode clip(), dan memulihkannya kapan saja di masa mendatang melalui metode pemulihan().
Selanjutnya, gunakan metode clip() untuk mendapatkan efek lampu sorot.
</iframe><button id=btn>Transformasi</button><button id=con>Jeda</button><canvas id=canvas width=400 height=290 style=border:1px solid black>Browser saat ini tidak mendukungnya kanvas, silakan ganti browser dan coba lagi</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(ini.innerHTML == 'jeda'){ this.innerHTML = 'lanjutkan'; clearInterval(oTimer); document.getElementById('canvas'); //Lebar dan tinggi kanvas penyimpanan var H=290,W=400; //Lampu sorot penyimpanan var ball = {}; //Penyimpanan foto var IMG; //Alamat foto penyimpanan var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = kanvas.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) bola = { 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); pertukaran pengembangan tumpukan Belajar dan berkomunikasi bersama dalam lingkaran: 582735936 ]//Untuk 1-3 personel front-end} //Bantu menerobos kemacetan teknis dan meningkatkan keterampilan berpikir} } } pembaruan fungsi(){ ball.x += bola.langkahX; bola.y += bola.langkahY; bumpTest(bola);} fungsi bumpTest(ele){ //sisi kiri if(ele.x <= ele.r){ ele.x = ele.r ; //Sisi atas if(ele.y <= ele.r){ ele.y = ele.r; ele.stepY = -ele.stepY; } //Sisi bawah if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Setel ulang ketinggian kanvas untuk mencapai efek membersihkan kanvas canvas.height = H; if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.save(); //Menghitamkan latar belakang kanvas cxt.beginPath(); 0,0,W,H); //Render lampu sorot cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.clip(); gunakan Tanpa clip(), gambar latar belakang kanvas akan muncul di area clip() cxt.drawImage(IMG,0,0); }//Selamat bergabung dalam lingkaran pertukaran pengembangan full-stack untuk belajar dan berkomunikasi bersama: 582735936 ]//Untuk 1-3 personel front-end} //Bantu menerobos hambatan teknis dan meningkatkan keterampilan berpikir}} initial();clearInterval (oTimer); fungsi fnInterval( ){ //Perbarui status gerakan update(); //Render render(); var oTimer = setInterval(fnInterval,50);Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.