CANVAS – HTML 5

Pengertian Canvas

canvas<canvas> di HTML 5 adalah element yang digunakan untuk menggambar grafik, object di website yg umumnya melalui script javascript.

<canvas> hanya merupakan wadah untuk menggambar, dan untuk menggambarnya anda harus menggunakan script, misal javascript.

<canvas> memiliki beberapa metode untuk menggambar Garis, kotak, lingkaran, karakter, dan menambahkan gambar.

Membuat Canvas

Canvas adalah area persegi yang dibuat menggunakan tag <canvas>, secara default canvas tidak meiliki border dan isi.
contoh :

<canvas id=”kanvasku” width=”200″ height=”100″></canvas>

Saat senggang saya coba pelajari dan membuat percobaan, berikut saya coba memeberikan contoh yang saya buat semoga bermanfaat :

<!DOCTYPE html>
<html>
<head>
<script>
function persegi(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.fillStyle="#000000";
	ctx.fillRect(10,10,90,40);
	console.log(ctx);
}
function line(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.moveTo(100,50);
	ctx.lineTo(200,100);
	ctx.stroke();
}
function lingkaran(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.beginPath();
	ctx.arc(100,50,40,0,2*Math.PI);
	ctx.stroke();
}
function text(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.font='20px, arial';
	ctx.fillStyle="#ffffff";
	ctx.fillText('Persegi',20,20);
	ctx.strokeText('Persegi',50,70);
}
</script>
</head>
<body >

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p>
<ol>
<li><a href="javascript:persegi()">Persegi</a></li>
<li><a href="javascript:line()">Line</a></li>
<li><a href="javascript:lingkaran()">Lingkaran</a></li>
<li><a href="javascript:text()">Text</a></li>
</ol>
</body>
</html>

Tadi penjelasan sederhananya.. semoga bermanfaat. silahkan dipahami. karena scriptnya setau saya tidak susah. jika ada yg tidak jelas silahkan bertanya.🙂

jangan lupa gabung di grup belajar website di facebook.

sumber : http://www.w3schools.com/html/html5_canvas.asp

2 thoughts on “CANVAS – HTML 5

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s