Menggambar Busur dan Lingkaran dengan HTML5

Posted In - 09.51 - 0 comments
Dalam tips ini kita akan melihat bagaimana menggambar busur dan lingkaran dengan html 5. API Canvas menyediakan sebuah method yang efektif untuk menggambar lingkaran yang bisa kita pakai. Method tersebut bernama "arc". Method arc ini nantinya tinggal kita panggil dan kita isi parameternya.



Cara memanggil method arc adalah :

arc(x,y,radius,startAngle,endAngle,bAntiClockwise)

  1. x,y adalah pusat koordinat busur/lingkaran.
  2. radius adalah jari-jari lingkaran.
  3. startAngle adalah sudut awal yaitu sudut dimana mulai menggambar busur/lingkaran.
  4. endAngle adalah sudut akhir yaitu sudut berhentinya menggambar busur/lingkaran.
  5. bAntiClockwise adalah parameter boolean yang berisi true/false, true jika kita menggambar busur secara berlawanan arah jarum jam, false jika kita mau menggambar busur secara searah jarum jam.

Berikut adalah code untuk menggambar lingkaran :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Recipes</title>
<script>
function draw_circle() {
 
  var canvasObj = document.getElementById("mycanvas");
  var canvasCtx = canvasObj.getContext("2d");
  canvasCtx.beginPath();
  canvasCtx.arc(100,100,50,0,Math.PI*2,true);
  canvasCtx.stroke();
}

function clear_canvas() {
  var canvasObj = document.getElementById("mycanvas");
  //May not work in some browsers: Change the value and set it back to original
  //canvasObj.width = 10;
  //canvasObj.width = 200;
  var canvasCtx = canvasObj.getContext("2d");
  canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_circle();return false">Click to draw a circle</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>

    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

dapat di-demo-kan di lingkaran

Berikut adalah code untuk menggambar wajah :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Recipes</title>
<script>
function draw_face() {
 
  var canvasObj = document.getElementById("mycanvas");
  var canvasCtx = canvasObj.getContext("2d");
 
  //Head
  canvasCtx.beginPath();
  canvasCtx.arc(100,100,50,0,Math.PI*2,true);
  //canvasCtx.closePath();
  canvasCtx.fillStyle = "rgb(255,0,255)";
  canvasCtx.fill();
 
  //Reset the Fill Style
  canvasCtx.fillStyle = "rgb(0,0,0)";
 
  //Left Eye
  canvasCtx.beginPath();
  canvasCtx.arc(75,75,5,0,Math.PI*2,true);
  canvasCtx.fill();
 
  //Right Eye
  canvasCtx.beginPath();
  canvasCtx.arc(125,75,5,0,Math.PI*2,true);
  canvasCtx.fill();
 
  //Nose
  canvasCtx.beginPath();
  canvasCtx.arc(100,100,10,0,Math.PI*2,true);
  canvasCtx.fill();
 
  //Mouth
  canvasCtx.beginPath();
  canvasCtx.arc(100,120,20,0,Math.PI,false);
  canvasCtx.fill();
}

function clear_canvas() {
  var canvasObj = document.getElementById("mycanvas");
  //May not work in some browsers: Change the value and set it back to original
  //canvasObj.width = 10;
  //canvasObj.width = 200;
  var canvasCtx = canvasObj.getContext("2d");
  canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
<div id="instructions"><a href="#"
 onclick="draw_face();return false">Click to draw a face</a> <a
 href="#" onclick="clear_canvas();return false">Click to clear</a></div>
<div id="drawingsurface"><canvas id="mycanvas" width="200"
 height="200" /></div>
</body>
</html>

dapat di-demo-kan di wajah

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)