Pinned

Penggunaan Canvas pada HTML

Elemen HTML Canvas digunakan untuk menggambar grafik menggunakan JavaScript. Elemen Canvas hanya merupakan sebuah container untuk kumpulan grafik. Dibutuhkan penggunaan JavaScript untuk dapat menggambar sebuah grafik. Canvas memiliki beberapa method untuk menggambar bentuk, persegi, lingkaran, teks, dan menambahkan gambar.

10 Bentuk Ilustrasi yang Sering Dibuat Menggunakan Canvas pada HTML
Ilustrasi Canvas HTML

Sebelum memahami lebih dalam materi tentang Penggunaan Canvas pada HTML, terlebih dahulu pelajari materi tentang: Fungsi SVG pada HTML [klik], Daftar URL Encoding pada HTML [klik], dan Tag Usang Deprecated pada HTML [klik].

Contoh: Canvas dapat berupa area persegi panjang pada laman HTML. Secara default, sebuah canvas tidak memiliki border ataupun konten. Atribut id telah ditentukan untuk merujuknya di dalam sebuah script, serta penggunaan panjang dan lebar atribut digunakan untuk mendefinisikan ukuran dari canvas. Atribut style digunakan untuk penambahan border pada Canvas.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="400" 

height="200"

style="border:2px solid #000000;">

</canvas>

 

</body>

 

</html>


Berikut ini beberapa bentuk yang dapat digambar menggunakna Canvas:


Menggambar Sebuah Lingkaran

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="400" 

height="200" 

style=

"border:2px solid #d3d3d3;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(200,100,50,0,2*Math.PI);

ctx.stroke();

</script>

 

</body>

 

</html>


Menggambar Teks

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="600" 

height="200"

style=

"border:1px solid #d3d3d3;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("ElfanMauludi",170,50);

</script>

 

</body>

 

</html>


Menggambar Gradien Linier

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="400" 

height="200" 

style=

"border:2px solid #d3d3d3;">

Browser tidak support tag canvas HTML5.

</canvas>

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"yellow");

grd.addColorStop(1,"grey");

ctx.fillStyle = grd;

ctx.fillRect(50,50,300,80);

</script>

 

</body>

</html>


Menggambar Lukisan pada Canvas

<!DOCTYPE html>

<html>

 

<body>

 

<p>

Image to use:

</p>

 

<img 

id="scream" 

src="http://www.theartstory.org/images20/works/van_gogh_vincent_7.jpg" 

alt="VAN GOGH" 

width="100" 

height="200">

 

<p>

Canvas to fill:

</p>

 

<canvas 

id="myCanvas" 

width="150" 

height="250"

style="border:1px solid #d3d3d3;">

</canvas>

 

<p>

<button onclick="myCanvas()">

Click untuk mencoba

</button>

</p>

 

<script>

function myCanvas() 

{

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img,0,0);}

</script>

 

</body>

 

</html>


Properti Blur untuk Menggambar Bayangan Canvas HTML

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="500" 

height="250">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.shadowBlur = 20;

ctx.shadowColor = "yellow";

ctx.fillStyle = "red";

ctx.fillRect(30, 20, 100, 80);

</script>

 

</body>

 

</html>


Method Rotasi pada HTML Canvas

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="300" 

height="150;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.rotate(20 * Math.PI / 180);

ctx.fillRect(100, 20, 100, 50);

</script>

 

</body>

 

</html>


HTML Canvas Translasi
Method translate() melakukan pemetaan ulang posisi (0,0) pada canvas.

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="300" 

height="150;">

 

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillRect(10, 10, 100, 50);

ctx.translate(80, 90);

ctx.fillRect(10, 10, 100, 50);

</script>

 

</body>

 

</html>


Method Transformasi pada Canvas HTML

<!DOCTYPE html>

<html>

 

<body>

 

<canvas 

id="myCanvas" 

width="300" 

height="150">

 

<script>

 

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

 

ctx.fillStyle = "yellow";

ctx.fillRect(0, 0, 250, 100)

 

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "grey";

ctx.fillRect(0, 0, 250, 100);

 

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "black";

ctx.fillRect(0, 0, 250, 100);

 

</script>

 

</body>

 

</html>


Membuat Animasi pada HTML Canvas
JavaScript membantu mensimulasikan animasi terbaik pada Canvas HTML5. Dua method penting pada JavaScript yang dapat digunakan untuk mensimulasikan animasi gambar pada canvas:
  1. setInterval(callback, time): Method ini secara berulang mengeksekusi runtutan kode yang diberikatan pada waktu tertentu.
  2. setTimeout(callback, time): Method ini mengeksekusi runtutan kode hanya sekali pada waktu tertentu.

<!DOCTYPE HTML>

<html>

 

<head>

<script type="text/javascript">

var pattern= new Image();

  

function animate()

{

pattern.src =

'https://www.reproduction-gallery.com/catalogue/uploads/1463472974_large-image_pablopicassowomanfacingtotheright1934lg.jpg';

 

setInterval(drawShape, 100);

}

  

function drawShape()

{

var canvas = document.getElementById('mycanvas');

   

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(20,20,20,20)';

ctx.strokeStyle = 'rgba(0,153,255,0.4)';

ctx.save();

ctx.translate(150,150);

    

var time = new Date();

ctx.rotate( ((2*Math.PI)/6)*time.getSeconds()

+ ( (2*Math.PI)/6000)*time.getMilliseconds() );

ctx.translate(0,28.5);

ctx.drawImage(pattern,-3.5,-3.5);

ctx.restore();

}

</script>

</head>

 

<body 

onload="animate();">

 

<canvas 

id="mycanvas" 

width="400" 

height="400">

</canvas>

 

</body>

 

</html>

Artikel ini didedikasikan kepada: Asti Pangestu, Ayu Putri Kurniasari, Bagas Adi Pamungkas, Delyana Sukahar, dan Dwi Pratiwiningrum.

5 komentar:

  1. Apa fungsi tag canvas pada html?

    BalasHapus
    Balasan
    1. Tag < canvas > pada html digunakan untuk menggambar grafik, fly, atau script yang umumnya Javascript. Tag < canvas > bersifat transparan, dan hanya merupakan wadah untuk pembuatan grafik. User harus menggunakan skrip tertentu untuk bisa benar-benar membuat sebuah grafik yang bagus.

      Hapus
    2. Canvas merupakan elemen HTMl yang dapat digunakan untuk menggambar grafik melalui skrip, yang biasanya digunakan untuk menggambar grafik, menggabungkan foto, atau membuat animasi sederhana.

      Hapus
  2. Manakah yang lebih baik, antara Canvas dan SVG pada html?

    BalasHapus
    Balasan
    1. SVg merupakan singkatan dari scalable vector graphics, dimana SVG digunakan untuk mendefinisikan grafik seperti kotak, lingkaran, teks, dan lain sebagainya. SVG memberikan performa yang lebih baik dengan jumlah object yang lebih sedikit atau bentuk permukaan yang lebih besar. Sedangkan Canvas pada HTML memberikan kinerja yang lebih baik dengan permukaan yang lebih kecil atau jumlah object yang lebih banyak.

      Hapus

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 -
- Big things start from small things -