Tugas Praktikum 8 – Gambar Smile Canvas

Tugas Praktikum ini akan membuat sebuah gambar smile dengan memanfaatkan fungsi Canvas pada sebuah web browser. Canvas ini dapat digunakan untuk menggambar secara langsung pada fungsi Layar web browser. Untuk menjalankan file ini dapat dipanggil secara langsung melalui browser dan apabila terdapat masalah maka dengan cara memanggil lewat server offline seperti XAMPP atau AppServ dengan file tersebut diletakkan pada folder htdocs.

 

Baiklah ini adalah screen shoot yang dihasilkan

 

Download Source Code HTML

Download

Download

 

 

 

Source Code Nampak seperti di bawah ini

<html lang="en">
<head>
 <title>Gambar Canvas Smile</title>
 <style type="text/css">
 canvas {
 border: 1px solid black;
 background:#A8FFA8;
 }
 </style>

</head>

<body bgcolor="#66FF99">
 <div>
 <canvas id="canvas" width="240" height="240"></canvas>
 </div>

 <script type="text/javascript" >
 var cv = document.getElementById('canvas').getContext('2d');
 if (cv == 'undefined') alert('canvas failed');       
 //lingkaran besar
 cv.beginPath();
 cv.arc(120,120,100,0,Math.PI*2,true);
 cv.fillStyle='lime';
 cv.fill();
 cv.stroke();
 cv.closePath();
 //lingkaran kecil
 cv.beginPath();
 cv.arc(70,100,10,0,Math.PI*2,true);
 cv.arc(165,100,10,0,Math.PI*2,true);
 cv.fillStyle='blue';
 cv.fill();
 cv.closePath();
 //Mulutnya
 cv.beginPath();
 cv.arc(120,120,75,0,Math.PI,false);
 cv.stroke();
 cv.closePath();
 </script>
</body>
</html>

 

About bagusware

Aku adalah aku, dan kamu adalah kamu... Aku dan kamu pasti bisa...

Posted on 7 April 2011, in PTI478. Bookmark the permalink. Tinggalkan komentar.

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

%d blogger menyukai ini: