Apakah kaedah kanvas?

Kaedah kanvas biasa termasuk getContext(), fillRect(), strokeRect(), clearRect(), beginPath(), moveTo(), lineTo(), arc(), fill(), stroke(), save() , restore() kaedah, dsb. Pengenalan terperinci: 1. kaedah getContext() untuk mendapatkan konteks lukisan Kanvas; 2. kaedah fillRect(), dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Kanvas ialah elemen dalam HTML5 yang menyediakan cara untuk melukis grafik menggunakan JavaScript. Melalui Kanvas, pembangun boleh melukis grafik, mencipta animasi, memproses imej, dsb. pada halaman web. Kanvas menyediakan satu siri kaedah untuk melukis dan memanipulasi grafik.

Berikut ialah beberapa kaedah Kanvas yang biasa digunakan:

1 getContext(): Dapatkan konteks lukisan Kanvas. Menggunakan kaedah getContext(), anda boleh mendapatkan objek konteks lukisan di mana lukisan dan operasi boleh dilakukan.

Kod contoh:

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

2. fillRect(): Lukis segi empat tepat yang diisi. Kaedah fillRect() digunakan untuk melukis segi empat tepat yang diisi dan boleh menetapkan kedudukan, saiz dan warna segi empat tepat.

Contoh kod:

context.fillRect(x, y, width, height);

3 strokeRect(): Lukis segi empat tepat jidar. Kaedah strokeRect() digunakan untuk melukis segi empat tepat sempadan dan boleh menetapkan kedudukan, saiz dan warna segi empat tepat.

Kod contoh:

context.strokeRect(x, y, width, height);

4 clearRect(): Kosongkan kawasan segi empat tepat. Kaedah clearRect() digunakan untuk mengosongkan kandungan kawasan segi empat tepat yang ditentukan dan boleh digunakan untuk memadamkan grafik pada kanvas.

Kod contoh:

context.clearRect(x, y, width, height);

5. beginPath(): Mulakan laluan. Kaedah beginPath() digunakan untuk memulakan laluan, yang boleh digunakan untuk melukis garisan, lengkung dan bentuk.

Kod contoh:

context.beginPath();

6 moveTo(): ​​​​Gerak titik permulaan laluan. Kaedah moveTo() digunakan untuk mengalihkan titik permulaan laluan ke titik koordinat yang ditentukan.

Contoh kod:

context.moveTo(x, y);

7. LineTo(): ​​Lukis garis lurus. Kaedah lineTo() digunakan untuk melukis garis lurus dari titik permulaan laluan semasa ke titik koordinat yang ditentukan.

Kod contoh:

context.lineTo(x, y);

8. Lukis lengkok. Kaedah lengkok() digunakan untuk melukis lengkok Anda boleh menetapkan titik tengah, jejari, sudut permulaan dan sudut penamat lengkok.

Kod contoh:

context.arc(x, y, radius, startAngle, endAngle);

9 fill(): Isi laluan. Kaedah fill() digunakan untuk mengisi kandungan laluan semasa dan boleh menetapkan warna dan gaya isian.

Kod contoh:

context.fill();

10 lejang(): Lukis sempadan laluan. Kaedah stroke() digunakan untuk melukis sempadan laluan semasa dan boleh menetapkan warna dan gaya sempadan.

Kod contoh:

context.stroke();

11. save(): Simpan keadaan kanvas. Kaedah save() digunakan untuk menyimpan keadaan kanvas semasa, termasuk transformasi semasa, gaya, kawasan keratan, dsb.

Kod contoh:

context.save();

12. Pulihkan keadaan kanvas. Kaedah restore() digunakan untuk memulihkan keadaan kanvas yang disimpan sebelum ini dan menggunakan keadaan yang disimpan sebelumnya pada kanvas semasa.

Kod contoh:

context.restore();

Di atas adalah beberapa kaedah Kanvas yang biasa digunakan, yang melaluinya pelbagai operasi lukisan dan grafik boleh dicapai. Pembangun boleh memilih kaedah yang sesuai untuk melukis dan mengendalikan Kanvas mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci Apakah kaedah kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!