Lompat ke konten Lompat ke sidebar Lompat ke footer

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.


Sebelum memahami lebih dalam materi tentang Cara Menggambar Ilustrasi HTML Menggunakan Tag Canvas, terlebih dahulu pelajari materi tentang: Membuat Tombol HTML Menggunakan Tag Button, Cara Membuat Teks Turun Seperti Tombol Enter Menggunakan Tag BR HTML, dan Pengaturan Tag Body pada 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>


Artikel ini didedikasikan kepada: Ferdida Zohanda Yulio, Haris Wahyu Darmawan, Husna Niswatan Afifah, Izaaz Waskito Widyarto, dan Khoirotun Nisa'Privani.

5 komentar untuk "Cara Menggambar Ilustrasi HTML Menggunakan Tag Canvas"

  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

Hubungi admin melalui Wa : +62-896-2414-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 -
- Big things start from small things -