Melancarkan Kreativiti dengan API Kanvas: Panduan Komprehensif untuk Grafik Web Dinamik

Bekerja dengan API Kanvas dalam JavaScript

API Kanvas dalam JavaScript menyediakan cara untuk melukis grafik, animasi dan elemen visual lain secara langsung pada halaman web. Ia memanfaatkan elemen, menawarkan set alat yang berkuasa untuk pembangun untuk mencipta aplikasi yang kaya dengan visual seperti permainan, visualisasi data dan reka bentuk grafik tersuai.

---

1. Memahami Elemen

elemen bertindak sebagai bekas untuk grafik. Untuk melukis padanya, anda mesti menggunakan JavaScript dan mengakses konteks pemaparan 2D atau konteks WebGL untuk grafik 3D.

Contoh elemen:

<canvas>




<hr>

<h3>
  
  
  <strong>2. Accessing the Canvas Context</strong>
</h3>

<p>To draw on the canvas, obtain the rendering context:<br>
</p>

<pre class="brush:php;toolbar:false">const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D rendering context

---

3. Melukis Bentuk pada Kanvas

Melukis Segiempat tepat:

• fillRect(x, y, lebar, tinggi): Melukis segi empat tepat yang diisi.
• strokeRect(x, y, lebar, tinggi): Melukis garisan segi empat tepat.
• clearRect(x, y, lebar, tinggi): Membersihkan kawasan tertentu.

Contoh:

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 150, 100);

ctx.clearRect(70, 70, 50, 50);

Melukis Laluan:

Gunakan beginPath(), moveTo(x, y), lineTo(x, y) dan closePath() .

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 50);
ctx.lineTo(300, 100);
ctx.closePath();

ctx.fillStyle = "green";
ctx.fill();

ctx.strokeStyle = "black";
ctx.stroke();

---

4. Bekerja dengan Warna dan Gaya

Gaya Pengisian dan Belaian:

• fillStyle: Menetapkan warna atau corak untuk bentuk.
• strokeStyle: Menetapkan warna atau corak untuk garis besar.

Menambah Kecerunan:

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");

ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

---

5. Teks Lukisan

Gunakan kaedah berikut untuk menambah teks pada kanvas:

• fillTeks(teks, x, y): Memaparkan teks yang diisi.
• strokeTeks(teks, x, y): Memaparkan garis besar teks.

Contoh:

ctx.font = "20px Arial";
ctx.fillStyle = "purple";
ctx.fillText("Hello Canvas!", 100, 100);

ctx.strokeStyle = "black";
ctx.strokeText("Hello Canvas!", 100, 100);

---

6. Menambah Imej pada Kanvas

Kaedah drawImage() memaparkan imej pada kanvas.

const img = new Image();
img.src = "path-to-image.jpg";

img.onload = () => {
  ctx.drawImage(img, 50, 50, 200, 100); // (image, x, y, width, height)
};

---

7. Transformasi dan Putaran

Penskalaan:

ctx.scale(2, 2); // Doubles the size of shapes
ctx.fillRect(10, 10, 50, 50);

Berputar:

ctx.rotate((Math.PI / 180) * 45); // Rotate 45 degrees
ctx.fillRect(100, 100, 50, 50);

Terjemah:

ctx.translate(50, 50); // Moves the canvas origin
ctx.fillRect(0, 0, 50, 50);

---

8. Animasi dengan API Kanvas

Gunakan fungsi requestAnimationFrame untuk mencipta animasi yang lancar.

Contoh: Animasi Bola Melantun:

<canvas>




<hr>

<h3>
  
  
  <strong>2. Accessing the Canvas Context</strong>
</h3>

<p>To draw on the canvas, obtain the rendering context:<br>
</p>

<pre class="brush:php;toolbar:false">const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D rendering context

---

9. Mengendalikan Interaksi Pengguna

API Kanvas boleh mengendalikan interaksi pengguna seperti klik dan pergerakan tetikus.

Contoh: Melukis pada Kanvas dengan Tetikus:

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 150, 100);

ctx.clearRect(70, 70, 50, 50);

---

10. Keserasian Penyemak Imbas

API Kanvas disokong oleh semua penyemak imbas moden. Adalah penting untuk memasukkan sandaran untuk penyemak imbas lama yang mungkin tidak menyokong .

---

11. Amalan Terbaik

1. Optimumkan Prestasi: Kosongkan hanya kawasan kanvas yang perlu dikemas kini.
2. Reka Bentuk Responsif: Gunakan window.devicePixelRatio untuk pemaparan yang jelas pada skrin DPI tinggi.
3. Kemunduran: Sediakan kandungan alternatif di dalam elemen untuk pelayar yang tidak disokong.

---

Kesimpulan

API Kanvas dalam JavaScript ialah alat serba boleh untuk mencipta grafik web yang dinamik dan interaktif. Dengan menguasai keupayaannya, pembangun boleh membuka kunci kemungkinan yang tidak berkesudahan untuk animasi, permainan dan visualisasi tersuai.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Melancarkan Kreativiti dengan API Kanvas: Panduan Komprehensif untuk Grafik Web Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!