Canvas pada HTML 5 cikal bakal game interaktif berbasis web

Share

HTML5_Logo_256Salah satu fitur baru yang ada pada HTML 5 adalah <canvas>.  Di HTML 5 <canvas> adalah element yang digunakan untuk menggambar grafik, object di website yang umumnya melalui script javascript. Elemen <canvas> hanyalah wadah atau media untuk menggambar saja, sedangkan untuk menggambarnya sendiri kita harus menggunakan script misalnya javascript. Untuk menggambar grafik, <canvas> menyediakan metode misalnya untuk menggambar garis, kotak lingkaran, karakter dan menambahkan gambar.

Membuat Canvas :

Media canvas berbentuk persegi yang secara default memiliki border dan isi.

Contoh canvas :

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Menggambar canvas dengan javascript :

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Browser Anda tidak mendukung tag kanvas HTML5.
</canvas>

<script>

var c=document.getElementById("myCanvas");//memanggil id canvas

var ctx=c.getContext("2d");//tipe canvas 2d
ctx.fillStyle="#FF0000";//warna dari grafik
ctx.fillRect(0,0,150,75);//x,y,width,height

</script>

</body>
</html>

Koordinat Canvas

Kanvas adalah grid dua dimensi.

Sudut kiri atas kanvas memiliki koordinat (0,0)

Jadi, fillRect () metode di atas memiliki parameter (0,0,150,75).

Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar piksel persegi panjang 150×75.

Canvas – Path
Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut:

moveTo (x, y) mendefinisikan titik awal baris
lineto (x, y) mendefinisikan titik akhir baris
Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari methtod tinta (ink), seperti stroke ().

Tentukan titik awal dalam posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan stroke () metode untuk menarik garis:

contoh :


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas 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>

Menggambar lingkaran pada canvas

Menggambar lingkaran pada kanvas menggunakan method arc();

contoh :

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas 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>

Canvas – Text

Untuk menggambar teks pada kanvas, properti  dan metode yang paling penting adalah:

Font – mendefinisikan properti font untuk teks
fillText (teks, x, y) – Mengisi teks pada kanvas
strokeText (teks, x, y) – Meletakkan teks pada kanvas (tidak mengisi)
Menggunakan fillText ():

contoh :

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas 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>

Menggunakan strokeText():

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas 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>

Canvas – Gradients

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk pada kanvas tidak terbatas pada warna solid.

Ada dua jenis gradien:

createLinearGradient (x, y, x1, y1) – Menciptakan gradien linier
createRadialGradient (x, y, r, x1, y1, r1) – Membuat gradien radial / melingkar
Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna.

Method addColorStop () digunakan untuk menentukan berhentinya warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 sampai dengan 1.

Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.

Menggunakan createLinearGradient ():

contoh :

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas HTML5.</canvas>

<script>

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

// Create 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>

Menggunakan createRadialGradient()

contoh :

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas HTML5.</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.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

Canvas – Images

Untuk menggambar sebuah gambar pada kanvas, kami akan menggunakan metode berikut:

drawImage (gambar, x, y)

contoh :

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Browser Anda tidak mendukung tag kanvas HTML5.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

Dengan adanya canvas sangat membantu dalam pembuatan game berbasis web.

–dfr–

Selamat mencoba – semoga bermanfaat

dan metode

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Translate »