Melaksanakan fungsi pemadam menggunakan kaedah clearRect() dalam petua tutorial HTML5 Canvas API_html5

Dalam dunia nyata, kami menggunakan berus untuk melukis pada papan lukisan; dalam kanvas html5, kami juga boleh menggunakan berus kanvas - objek CanvasRenderingContext2D untuk melukis pada kanvas. Seperti yang kita sedia maklum, berus kami biasanya digunakan bersama pemadam untuk membetulkan kesilapan semasa proses mengecat dan mengecat semula. Dalam kanvas html5, objek CanvasRenderingContext2D juga memberikan kita pemadam yang boleh digunakan semula selama-lamanya - kaedah clearRect().

Kod XML/HTMLSalin kandungan ke papan keratan

1. clearRect(x, y, lebar, tinggi)

Kaedah clearRect() bagi objek CanvasRenderingContext2D digunakan untuk mengosongkan semua piksel grafik dalam kawasan segi empat tepat kanvas dengan titik koordinat (x, y) yang ditentukan sebagai sudut kiri atas, lebar sebagai lebar dan tinggi sebagai ketinggian.

Sekarang, mari lihat contoh praktikal. Kami mula-mula melukis bulatan pepejal dengan jejari 50px, dan kemudian gunakan pemadam clearRect() untuk memadamkan kawasan setempat di dalamnya. Kod html5 asal untuk melukis bulatan adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

"UTF-8"
4. >
"myCanvas"
8. lebar=
"400px"
9. tinggi=
"300px"
10. style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.
"teks/javascript"
11. >
12. //Dapatkan objek Kanvas (kanvas)
14. var kanvas = document.getElementById("myCanvas"
);
15. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
16. jika(canvas.getContext){ 
//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
var
18. ctx = canvas.getContext("2d");
 
19. //Lukis bulatan dengan titik koordinat (100,10) sebagai pusat dan jejari 50px
20. ctx.arc(100, 100, 50, 0, Math.PI * 2, salah);
 
22. //Lukis dan isi bahagian dalam bulatan
ctx.fill();
23. }