Biasakan diri dengan ciri umum teg kanvas

Untuk memahami atribut biasa teg Kanvas, contoh kod khusus diperlukan

Teg Kanvas ialah elemen penting dalam HTML5 dan digunakan untuk melukis grafik, animasi, video dan elemen lain pada halaman web. Dengan menetapkan sifat teg Kanvas dan menggunakan kod JavaScript, anda boleh mencapai pelbagai kesan hebat. Artikel ini akan memperkenalkan sifat biasa teg Kanvas dan memberikan contoh kod khusus untuk membantu pembaca memahami dan menggunakan sifat ini dengan lebih baik.

1. Atribut lebar dan tinggi
   Atribut lebar dan tinggi teg Kanvas digunakan untuk menetapkan lebar dan tinggi kanvas masing-masing. Contohnya:

<canvas id="myCanvas" width="500" height="300"></canvas>

Kod di atas menghasilkan kanvas dengan lebar 500 piksel dan ketinggian 300 piksel. Kita boleh melaraskan saiz kanvas dengan mengubah suai nilai kedua-dua sifat ini. Kaedah

2. getContext() kaedah
   getContext() digunakan untuk mendapatkan konteks pemaparan dan persekitaran lukisan objek Kanvas. Kaedah ini menerima parameter yang menentukan jenis konteks lukisan. Jenis yang biasa digunakan ialah "2d" dan "webgl". Contohnya:

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

Kod di atas memperoleh konteks lukisan 2D, yang melaluinya kita boleh melakukan pelbagai operasi lukisan.

3. fillStyle property
   fillStyle property digunakan untuk menetapkan warna isian grafik. Warna boleh ditentukan menggunakan nama warna, nilai RGB, nilai perenambelasan, dsb. Contohnya:

ctx.fillStyle = "red";

Kod di atas menetapkan warna isian bentuk kepada merah.

4. atribut Gaya lejang
   Atribut Gaya lejang digunakan untuk menetapkan warna lejang grafik. Sama seperti fillStyle, warna boleh ditentukan dalam pelbagai cara. Contohnya:

ctx.strokeStyle = "blue";

Kod di atas menetapkan warna strok grafik kepada biru.

5. properti LineWidth
   lineWidth digunakan untuk menetapkan lebar garisan berus. Contohnya:

ctx.lineWidth = 2;

Kod di atas menetapkan lebar garisan berus kepada 2 piksel. Kaedah

6. beginPath() dan closePath() Kaedah
   beginPath() digunakan untuk memulakan laluan baharu dan kaedah closePath() digunakan untuk menutup laluan semasa. Contohnya:

ctx.beginPath();
ctx.closePath();

Kod di atas memulakan laluan baharu dan menutup laluan semasa. Kaedah

7. moveTO() dan lineTo()
   Kaedah moveTo() digunakan untuk mengalihkan titik permulaan lukisan ke koordinat yang ditentukan, dan kaedah lineTo() digunakan untuk melukis garis lurus ke koordinat yang ditentukan. Contohnya:

ctx.moveTo(100, 100);
ctx.lineTo(200, 200);

Kod di atas akan melukis garis lurus dari (100, 100) hingga (200, 200). Kaedah

8. kaedah arka()
   kaedah arka() digunakan untuk melukis arka atau sebahagian arka. Kaedah ini menerima 6 parameter iaitu koordinat pusat bulatan, jejari, sudut permulaan, sudut penamat, dan sama ada mengikut arah jam. Contohnya:

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

Kod di atas akan melukis bulatan dengan jejari 50 piksel.

9. kaedah isi() dan lejang()
   Kaedah isi() digunakan untuk mengisi laluan semasa, dan kaedah lejang() digunakan untuk melukis lejang laluan semasa. Contohnya:

ctx.fill();
ctx.stroke();

Kod di atas mengisi dan melukis laluan semasa.

Melalui contoh kod di atas, kita boleh mengetahui tentang atribut biasa dan penggunaan teg Kanvas. Dengan menggunakan sifat-sifat ini secara fleksibel, kami boleh mencapai pelbagai kesan lukisan yang kompleks dan meningkatkan interaktiviti dan kesan visual halaman web. Pembaca boleh melaraskan nilai atribut ini secara fleksibel mengikut keperluan khusus mereka untuk mencapai kesan yang mereka inginkan.

Atas ialah kandungan terperinci Biasakan diri dengan ciri umum teg kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!