Contoh lukisan segi empat tepat dalam HTML5 Canvas_html5 petua tutorial

Artikel ini diterjemahkan daripada Steve Fulton & Jeff Fulton HTML5 Canvas, Bab 2, “The Basic Rectangle Shape”.

Mari kita lihat bentuk geometri ringkas yang dibina ke dalam Kanvas—lukisan segi empat tepat. Dalam Kanvas, terdapat tiga cara untuk melukis segi empat tepat: isi (fillRect), lejang (StrokeRect) dan jelas (clearRect). Sudah tentu, kita juga boleh menggunakan "laluan" untuk menerangkan semua grafik termasuk segi empat tepat.

Berikut ialah API bagi tiga kaedah di atas:

1.fillRect(x,y,lebar,tinggi). Lukiskan segi empat tepat pepejal bermula pada (x, y), dengan lebar lebar dan tinggi tinggi.
2.strokeRect(x,y,lebar,tinggi). Lukis sebuah kotak segi empat tepat bermula dari (x, y), dengan lebar sebagai lebar dan tinggi sebagai tinggi. Kotak segi empat tepat akan dipaparkan dalam gaya yang berbeza mengikut sifat strokeStyle, lineWidth, lineJoin dan miterLimit yang ditetapkan pada masa ini.
3.clearRect(x,y,lebar,tinggi). Kosongkan kawasan segi empat tepat bermula dari (x, y) dengan lebar lebar dan tinggi untuk menjadikannya telus sepenuhnya.

Sebelum memanggil kaedah di atas untuk melukis Kanvas, kita perlu menetapkan gaya isian dan pukulan. Cara paling asas untuk menetapkan gaya ini ialah menggunakan warna 24-bit (diwakili sebagai rentetan heksadesimal). Berikut ialah contoh mudah:

Salin kod

Kodnya adalah seperti berikut:

context. fillStyle = "#000000";
context.strokeStyle = "#ff00ff";

Dalam contoh di bawah, warna isian ditetapkan kepada hitam dan warna lejang ditetapkan kepada ungu :

Salin kod

Kod adalah seperti berikut:

fungsi drawScreen( ) {
context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40) ;
context .strokeRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

Hasil pelaksanaan kod adalah seperti yang ditunjukkan di bawah: