Objek Canvas DOM HTML

Elemen <canvas> menentukan kawasan bitmap di halaman HTML.

API Canvas membolehkan JavaScript menggambar grafik di atas kertas.

API Canvas boleh menggambar bentuk, garisan, kurva, kotak, teks dan imej, serta warna, putar, kecerahan dan lain-lain operasi pixel.

Tambahkan Canvas ke HTML

Anda boleh tambah elemen canvas di mana-mana di halaman HTML dengan tanda <canvas>:

Contoh

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

Coba sendiri

Bagaimana untuk melawati elemen Canvas

Anda boleh guna kaedah HTML DOM getElementById() untuk melawati elemen <canvas>:

const myCanvas = document.getElementById("myCanvas");

Untuk menggambar di atas kertas, Anda perlu membuat objek konteks 2D:

const ctx = myCanvas.getContext("2d");

Catatan

Elemen HTML <canvas> sendiri tidak memiliki fungsi gambar.

Anda harus menggunakan JavaScript untuk menggambar apapun.

Metode getContext() mengembalikan objek yang memiliki alat gambar (metode).

Menggambar di atas kertas

Setelah membuat objek konteks 2D, Anda dapat menggambar di atas kertas.

Metode fillRect() di bawah ini menggambar persegi hitam yang posisinya di koordinat 20,20. Persegi ini lebar 150 piksel dan tinggi 100 piksel:

Contoh

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Coba sendiri

Dengan warna

Properti fillStyle menetapkan warna pengisi objek gambar.

Contoh

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Coba sendiri

Anda juga dapat menggunakan metode document.createElement() untuk membuat elemen <canvas> baru dan menambahkannya ke halaman HTML yang ada:

Contoh

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Coba sendiri

Path

Cara umum untuk menggambar di atas kertas adalah:

1. Mulai jalur - beginPath()
2. Pindah ke titik - moveTo()
3. Gambar di jalur - lineTo()
4. Gambar jalur - stroke()

Contoh

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Coba sendiri