DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Cara Menggambar Ilustrasi HTML Menggunakan 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.

3 Contoh Program Menggunakan Tag Canvas pada HTML
Ilustrasi Tag Canvas HTML

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

Baca Juga:

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>


Contoh:

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

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

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

~ Ikatlah Ilmu dengan Memostingkannya ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas