Belajar Koding HTML Bagian 18: Membuat/Memanggil Elemen Canvas
.png)
Cara Membuat HTML Canvas
HTML Canvas adalah elemen dalam HTML5 yang digunakan untuk menggambar grafik, animasi, dan berbagai bentuk lainnya menggunakan JavaScript. Untuk Membuat dan Menggunakan elemen <canvas> dalam HTML dapat mengikuti Langkah - langkah berikut:
1. Membuat Elemen <canvas> di HTML
Elemen <canvas> berfungsi sebagai area gambar dalam halaman web.
Contoh:
<canvas
id="myCanvas" width="500" height="300" style="border:1px
solid black;">
Browser Anda tidak mendukung elemen canvas.
</canvas>
Penjelasan:
- id="myCanvas" → Digunakan untuk mengakses
elemen dengan JavaScript.
- width="500" dan height="300" → Menentukan ukuran kanvas
dalam piksel.
- style="border:1px solid
black;"
→ Memberikan batas agar kanvas terlihat jelas.
- Teks dalam <canvas> → Ditampilkan jika browser
tidak mendukung Canvas.
2.
Mengakses Canvas dengan JavaScript
Setelah membuat elemen Canvas,
kita perlu mengaksesnya dengan JavaScript untuk menggambar.
Contoh:
<script>
var canvas = document.getElementById("myCanvas");
// Mengambil elemen canvas
var ctx = canvas.getContext("2d"); //
Mengaktifkan konteks 2D untuk menggambar
</script>
Penjelasan:
- document.getElementById("myCanvas") → Mengambil elemen <canvas>.
- canvas.getContext("2d") → Mendapatkan konteks 2D,
yang memungkinkan kita menggambar bentuk.
3.
Menggambar Bentuk Dasar
a)
Menggambar Persegi Panjang Berisi (Filled Rectangle)
<script>
ctx.fillStyle = "red"; // Warna isi
merah
ctx.fillRect(50, 50, 200, 100); // (x, y,
width, height)
</script>
✔️ Output: Persegi panjang merah di posisi (50,50)
dengan ukuran 200x100.
b)
Menggambar Persegi Panjang Berbatas (Stroked Rectangle)
<script>
ctx.strokeStyle = "blue"; // Warna
garis biru
ctx.strokeRect(100, 100, 150, 80); // (x, y,
width, height)
</script>
✔️ Output: Persegi panjang dengan garis tepi biru di
posisi (100,100).
c)
Menggambar Garis
<script>
ctx.beginPath();
ctx.moveTo(50, 50); // Titik awal
ctx.lineTo(250, 150); // Titik akhir
ctx.stroke(); // Menggambar garis
</script>
✔️ Output: Garis dari titik (50,50) ke (250,150).
d)
Menggambar Lingkaran
<script>
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI); // (x,
y, radius, startAngle, endAngle)
ctx.stroke();
</script>
✔️ Output: Lingkaran dengan pusat di (150,150)
dan jari-jari 50px.
4.
Menambahkan Teks ke Canvas
<script>
ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 100,
200); // (teks, x, y)
</script>
✔️ Output: Teks "Hello, Canvas!" pada
posisi (100,200).
5.
Contoh Lengkap HTML Canvas
Gabungan dari semua elemen di atas
dalam satu halaman.
<!DOCTYPE
html>
<html
lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar HTML Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500"
height="300" style="border:1px solid black;">
Browser Anda tidak mendukung elemen canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Menggambar persegi panjang berisi
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 200, 100);
// Menggambar persegi panjang berbatas
ctx.strokeStyle = "blue";
ctx.strokeRect(100, 100, 150, 80);
// Menggambar garis
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 150);
ctx.stroke();
// Menggambar lingkaran
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.stroke();
// Menambahkan teks
ctx.font = "20px Arial";
ctx.fillText("Hello, Canvas!", 100,
250);
</script>
</body>
</html>
✔️ Cara melihat hasilnya:
- Simpan kode di atas sebagai canvas.html.
- Buka file tersebut di browser (Google Chrome, Firefox,
Edge, dll.).
- Anda akan melihat berbagai bentuk dan teks yang digambar di kanvas.
 |
| Tampilan Hasil (Output) Membuat Canvas |
6.
Interaksi dengan Pengguna (Menggambar dengan Mouse)
Jika ingin membuat fitur menggambar
dengan mouse, gunakan event listener:
<script>
var isDrawing = false;
canvas.addEventListener("mousedown",
function () {
isDrawing = true;
});
canvas.addEventListener("mousemove",
function (event) {
if (isDrawing) {
ctx.fillStyle = "black";
ctx.fillRect(event.offsetX, event.offsetY,
5, 5);
}
});
canvas.addEventListener("mouseup", function
() {
isDrawing = false;
});
</script>
✔️ Hasilnya: Anda bisa menggambar di kanvas dengan
menggerakkan mouse!
Kesimpulan
- HTML <canvas> adalah elemen untuk menggambar
grafik menggunakan JavaScript.
- Menggunakan getContext("2d") untuk menggambar bentuk
seperti persegi, lingkaran, garis, dan teks.
- Bisa ditambahkan event
listener untuk interaksi, seperti menggambar dengan mouse.
0 Response to "Belajar Koding HTML Bagian 18: Membuat/Memanggil Elemen Canvas"
Post a Comment