Langsung ke konten utama

HTML Tag Canvas

Tag canvas dalam HTML digunakan untuk menggambar grafik pada halaman website menggunakan JavaScript. Tag ini dapat digunakan untuk menggambar jalur, kotak, teks, gradien, ataupun menambahkan gambar. Secara default, tag ini tidak mengandung batas dan teks. Tag canvas merupakan tag baru yang menjadi bagian dari HTML5.

Sintak:
<canvas id = "script"> Konten... </canvas>

Atribut: tag ini menerima dua atribut, yakni sebagai berikut:
  • satu, height: atribut ini digunakan untuk mengatur ukuran tinggi canvas pada halaman html.
  • dua, width: atribut ini digunakan untuk mengatur ukuran lebar canvas pada halaman html.

Contoh 1:

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id = "MakanDanMakan" 

width = "200"

height = "100" 

style = "border:1px solid black">

</canvas>

 

</body>

</html>


Contoh 2:

<!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>


Contoh 3:

<!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>

Komentar

  1. Apa fungsi tag canvas pada html?

    BalasHapus
    Balasan
    1. Tag < 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.

      Hapus
  2. Apakah penting untuk belajar canvas HTML?

    BalasHapus
    Balasan
    1. Tidak 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.

      Hapus
    2. Klo memang fokusnya sebagai programmer sebaiknya tidak usah terlalu serius mempelajari canvas, tapi klo fokusnya memang design, maka canvas perlu untuk dipelajari.

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D