API Canvas

Elemen <canvas> menentukan kawasan bitmap di halaman HTML.

API Canvas memungkinkan JavaScript untuk menggambar grafik di atas kertas.

API Canvas boleh menggambar bentuk, baris, 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 menggunakan tag <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 grafik 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 segi empat hitam, titik atas kirinya berada di posisi 20,20. Segi empat 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 biasa 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