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

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

WBOY

Lepaskan： 2016-05-16 15:51:53

asal

1983 orang telah melayarinya

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

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"

> Contoh permulaan menggunakan HTML5 clearRect() untuk memadamkan kawasan segi empat tepat

"myCanvas"

lebar=

"400px"

tinggi=

"300px"

style="sempadan: 1px merah pepejal;"> Pelayar anda tidak menyokong teg kanvas.

"teks/javascript"

//Dapatkan objek Kanvas (kanvas)

var kanvas = document.getElementById("myCanvas"

);

//Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5

jika(canvas.getContext){

//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan

var

ctx = canvas.getContext("2d");

//Lukis bulatan dengan titik koordinat (100,10) sebagai pusat dan jejari 50px

ctx.arc(100, 100, 50, 0, Math.PI * 2, salah);

//Lukis dan isi bahagian dalam bulatan

ctx.fill();

}

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

Salin kandungan ke papan keratan

"teks/javascript">
//Dapatkan objek Kanvas (kanvas)
var kanvas = document.getElementById("myCanvas");
//Cukup mengesan sama ada penyemak imbas semasa menyokong objek Canvas untuk mengelakkan ralat sintaks dalam sesetengah penyemak imbas yang tidak menyokong html5
jika(canvas.getContext){
//Dapatkan objek CanvasRenderingContext2D (berus) yang sepadan
var ctx = canvas.getContext("2d");
ctx.arc(100, 100, 50, 0, Math.PI * 2,
);
ctx.fill();
ctx.clearRect(90, 90, 20, 20);

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: