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. }
25. Kesan paparan yang sepadan adalah seperti berikut:
Kini, kami menggunakan kaedah clearRect() untuk memadamkan kawasan segi empat tepat bulatan pepejal dengan pusat (100,100) sebagai pusat dan 10px pada setiap sisi.
Kod JavaScript
27. Salin kandungan ke papan keratan
1. "teks/javascript">
2. //Dapatkan objek Kanvas (kanvas)
3. var kanvas = document.getElementById("myCanvas");
4. //Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
5. jika(canvas.getContext){ 
6. //Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
7. var ctx = canvas.getContext("2d");  
//Lukis bulatan dengan titik koordinat (100,10) sebagai pusat dan jejari 50px
9. ctx.arc(100, 100, 50, 0, Math.PI * 2,
salah
10. );  
//Lukis dan isi bahagian dalam bulatan
12. ctx.fill();
13.  
//Padamkan grafik dalam kawasan segi empat tepat
15. ctx.clearRect(90, 90, 20, 20);
}
Kesan paparan yang sepadan adalah seperti berikut (adakah ia sedikit seperti syiling tembaga?).
Pada halaman, kita boleh memadamkan kawasan pada halaman untuk memaparkan imej latar belakang.
Dalam contoh di bawah, kita padamkan ruang putih dalam segi empat tepat dan biarkan ia menunjukkan latar belakang halaman:

Kod JavaScript

Salin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.         badan { latar belakang: url("./images/bg2.jpg") ulang; }  
8.         #kanvas { sempadan: 1px pepejal #aaaaa; paparan: sekat; jidar: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "kanvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

  

    window.onload = fungsi(){   

        var kanvas = document.getElementById("kanvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        //清空画布   

        context.clearRect(0,0,canvas.width,canvas.height);   

  

    };