Mendedahkan rahsia sifat kanvas

Untuk menerokai rahsia atribut kanvas, contoh kod khusus diperlukan

Kanvas ialah alat lukisan grafik yang sangat berkuasa dalam HTML5, yang melaluinya kita boleh melukis grafik kompleks, kesan dinamik, permainan dan sebagainya dengan mudah dalam halaman web . Walau bagaimanapun, untuk menggunakannya, kita mesti biasa dengan sifat dan kaedah Canvas yang berkaitan dan menguasai cara menggunakannya. Dalam artikel ini, kami akan meneroka beberapa sifat teras Kanvas dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik cara sifat ini harus digunakan.

1. Atribut kanvas

1. lebar dan tinggi

Atribut lebar dan tinggi elemen Kanvas menentukan saiz permukaan lukisan. Kedua-dua sifat lalai kepada 300, dan anda boleh menukar saiz kanvas dengan menetapkannya. Perlu diingatkan bahawa menetapkan kedua-dua sifat ini akan menyebabkan kandungan kanvas dikosongkan.

Sampel kod:

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

2. getContext()

getContext() ialah salah satu kaedah teras Kanvas, yang mengembalikan objek yang menyediakan pelbagai kaedah dan sifat untuk melukis pada Kanvas. Kaedah ini hanya mempunyai satu parameter, yang menentukan jenis konteks (2d, webgl, dll.).

Contoh kod:

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

3. Atribut gaya

Atribut gaya digunakan untuk menetapkan gaya elemen Kanvas, termasuk warna latar belakang, gaya sempadan, lebar, dsb. Perlu diingatkan bahawa sifat ini tidak menjejaskan kandungan yang dilukis.

Contoh kod:

<canvas id="myCanvas" width="500" height="500" style="background-color: #f2f2f2; border: 1px solid #000;"></canvas>

2. Sifat lukisan

1. fillStyle dan strokeStyle

Sifat fillStyle digunakan untuk menetapkan warna isian, dan sifat strokeStyle digunakan untuk menetapkan warna garis.

Contoh kod:

ctx.fillStyle = "#FF0000";
ctx.strokeSytle = "#000000";

2. lineWidth

Sifat lineWidth digunakan untuk menetapkan lebar garis.

Contoh kod:

ctx.lineWidth = 5;

3. lineCap dan lineJoin

Sifat lineCap digunakan untuk menetapkan gaya titik akhir garisan Terdapat tiga nilai pilihan: punggung (kepala rata), bulat (kepala bulat) dan segi empat sama kepala). Atribut lineJoin digunakan untuk menetapkan gaya persilangan garisan Ia mempunyai tiga nilai pilihan: miter (miter), bulat (sambungan bulat) dan bevel (langsung).

Contoh kod:

ctx.lineCap = "round";
ctx.lineJoin = "round";

3. Kaedah melukis

1. fillRect dan strokeRect

Kaedah fillRect digunakan untuk melukis segi empat tepat yang diisi, dan kaedah strokeRect digunakan untuk melukis segi empat berongga.

Sampel kod:

ctx.fillRect(50, 50, 100, 100);
ctx.strokeRect(50, 50, 100, 100);

2. fillText dan strokeText

Kaedah fillText digunakan untuk melukis teks yang diisi, dan kaedah strokeText digunakan untuk melukis teks kosong.

Contoh kod:

ctx.font = "30px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("Hello World!", 100, 100);
ctx.strokeStyle = "#FF0000";
ctx.strokeText("Hello World!", 100, 100);

3. beginPath, moveTo, lineTo, arc dan closePath

Gabungan kaedah ini boleh melukis sebarang grafik yang kompleks. Kaedah beginPath digunakan untuk mula melukis laluan, kaedah moveTo digunakan untuk menggerakkan berus ke koordinat yang ditentukan, kaedah lineTo digunakan untuk melukis garis lurus berdasarkan koordinat, kaedah lengkok digunakan untuk melukis lengkok, dan kaedah closePath digunakan untuk menamatkan laluan.

Contoh kod:

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.arc(100, 200, 50, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = "#FF0000";
ctx.fill();

IV Ringkasan

Melalui pengenalan artikel ini, pembaca seharusnya sudah mempunyai pemahaman yang lebih mendalam tentang beberapa sifat teras Kanvas dan boleh menggunakannya untuk melukis dengan mahir melalui contoh kod. Sudah tentu, ini hanyalah puncak gunung ais Canvas Dalam penggunaan masa hadapan, kita masih perlu terus belajar, meneroka dan berlatih untuk menggunakan kuasanya dengan lebih baik.

Atas ialah kandungan terperinci Mendedahkan rahsia sifat kanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!