Menjalankan Canvas HTML
- Halaman Sebelumnya Ringkasan Canvas
- Halaman Berikutnya Koordinat Canvas
Gambar di atas kanvas menggunakan JavaScript
Semua penggambaran di atas kanvas HTML harus dilakukan menggunakan JavaScript:
Contoh
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Langkah ke 1: Temukan elemen Canvas
Pertama, Anda harus menemukan elemen <canvas>.
Ini dapat dilakukan dengan menggunakan metode DOM HTML getElementById():
const canvas = document.getElementById("myCanvas");
Langkah ke 2: Buat objek pereka
Selain itu, Anda perlu memiliki objek pereka kanvas.
getContext() adalah objek HTML bawaan yang menyediakan properti dan metode untuk penggambaran:
const ctx = canvas.getContext("2d");
Langkah ke 3: Gambar di atas kanvas
Akhirnya, Anda dapat menggambar di atas kanvas.
Setel warna pengisi objek pereka menjadi merah:
ctx.fillStyle = "#FF0000";
Properti fillStyle dapat berupa warna CSS, gradien, atau pola. Isi standar fillStyle adalah hitam.
Metoden fillRect(x,y,lebar,tinggi) digunakan untuk menggambar segiempat di atas kanvas, dengan mengisi warna:
ctx.fillRect(0, 0, 150, 75);
Lihat Juga:
- Halaman Sebelumnya Ringkasan Canvas
- Halaman Berikutnya Koordinat Canvas
