Cara Menggambar Ilustrasi HTML Menggunakan Tag Canvas
 |
| Ilustrasi Tag Canvas HTML |
<canvas id = "script"> Konten... </canvas>
Atribut: tag ini menerima dua atribut, yakni sebagai berikut:
- height: atribut ini digunakan untuk mengatur ukuran tinggi canvas pada halaman html.
- width: atribut ini digunakan untuk mengatur ukuran lebar canvas pada halaman html.
Contoh:
<!DOCTYPE html>
<html>
<body>
<canvas
id = "MakanDanMakan"
width = "200"
height = "100"
style = "border:1px solid black">
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id = "makan"
height = "200"
width = "200"
style = "border:1px solid black">
</canvas>
<script>
var c = document.getElementById("makan");
var cx = c.getContext("2d");
cx.beginPath();
cx.arc(100, 100, 90, 0, 2 * Math.PI);
cx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas
id = "makan"
width = "200"
height = "200"
style = "border:1px solid black">
</canvas>
<script>
var c=document.getElementById("makan");
var cx = c.getContext("2d");
var grd = cx.createRadialGradient(100,
100, 5, 100, 100, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "green");
cx.fillStyle = grd;
cx.fillRect(0, 0, 200, 200);
</script>
</body>
</html>
- 5 Atribut Utama yang Digunakan Mengatur Properti Kolom pada Tag Col HTML [klik]
- 6 Atribut Utama Penggunaan Tag Colgroup HTML [klik]
- Cara Sederhana Menggunakan Tag Data pada HTML [klik]
- 2 Contoh Penggunakan Fitur Autocomplete Menggunakan Tag Datalist HTML [klik]
- 2 Contoh Program Penggunaan Tag DD pada HTML [klik]
- 2 Atribut Tag Del HTML [klik]
- 4 Contoh Program Penggunaan Tag Dfn pada HTML [klik]
Apa fungsi tag canvas pada html?
BalasHapusTag < canvas > pada HTML digunakan untuk menggambar grafik website menggunakan JavaScript. Tag ini juga dapat digunakan untuk menggambar jalur, kotak, teks, gradien, dan menambahkan gambar pada dokumen html.
HapusApakah penting untuk belajar canvas HTML?
BalasHapusTidak wajib, sifatnya hanya opsional. Canvas pada HTML tidak memberikan sesuatu yang sifatnya penting bagi para user, hanya memungkinkan untuk membuat efek yang sifatnya unik pada dokumen html.
HapusKlo memang fokusnya sebagai programmer sebaiknya tidak usah terlalu serius mempelajari canvas, tapi klo fokusnya memang design, maka canvas perlu untuk dipelajari.
Hapus