Tutorial Canvas Pada HTML5

Pada tutorial kali ini kita akan mempelajari tentang tutorial canvas pada HTML5, yang dimana fitur Canvas ini adalah fitur baru pada versi HTML5 saat ini.

Canvas adalah media yang digunakan dalam pembuatan lukisan. Salah satu tokoh yang pernah menggunakan metode pelukisan dengan minyak ini adalah seorang keturunan dari Prancis yang bernama Madonna pada tahun 1440. Seni lukis Canvas biasanya dibentangkan pada sebuah bingkai kayu. Di bawah ini adalah contoh gambar pelukisan dengan Canvas.

tutorial canvas pada html5

Dalam Kanvas pada HTML5, anda dapat menggambar berbagai macam seni grafis, mulai dari garis – garis sederhana ke objek grafis yang lebih kompleks. Elemen yang digunakan untuk membuat gambar Canvas ini adalah <canvas>.

Proses pembuatan Canvas pada HTML memiliki beberapa metode dalam penggambarannya, seperti penggambaran path (garis), boxes (kotak), circles (lingkaran), text (teks), dan gambar grafis.

Di bawah ini adalah beberapa contoh dari penerapan elemen Canvas :

Simple Canvas

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas</title>
		<style>
		canvas{
			border: 1px solid black;
		}
		</style>
	</head>
	<body>
		<canvas width="200" height="100">
			Browser anda tidak mendukung Tag Canvas HTML5
		</canvas>
	</body>
</html>

Dan gambar di bawah ini adalah outputnya :

apa itu canvas pada html5

Menggambar Canvas Dengan Javascript

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
canvas{
	border: 1px solid black;	
	}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100">
Browser anda tidak mendukung Tag Canvas HTML5
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

Output :

canvas pada html5

Menggambar Garis

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
canvas{
	border: 1px solid black;	
	}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100">
Browser anda tidak mendukung Tag Canvas HTML5
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Output :

canvas html5

Membuat Lingkaran

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
canvas{
	border: 1px solid black;	
	}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100">
Browser anda tidak mendukung Tag Canvas HTML5
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>

Output :

cara menggunakan canvas pada html5

Menggambar Sebuah Teks

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
canvas{
	border: 1px solid black;	
	}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100">
Browser anda tidak mendukung Tag Canvas HTML5
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
</body>
</html>

Output :

cara menggunakan canvas pada html5

Membuat Teks Stroke

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
canvas{
	border: 1px solid black;	
	}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100">
Browser anda tidak mendukung Tag Canvas HTML5
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
</body>
</html>

Output :

menggambar canvas pada halaman web

Menggambar Gradient

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style>
canvas{
	border: 1px solid black;	
	}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100">
Browser anda tidak mendukung Tag Canvas HTML5
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Membuat Gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

//Fill With Gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>

Output :

memasukan canvas ke dalam website

Menggambar Gradient Circular

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.arc(50, 50, 50, 0, 2*Math.PI);
ctx.fillStyle = grd;
ctx.fill();
</script>
</body>
</html>

Output :

canvas

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Tutorial Canvas Pada HTML5”