In this recipe, we shall take a look at how to draw arcs and circles. The Canvas API provides us with the useful method() function that we can use to do that.The method signature is as follows: arc(x,y,radius,startAngle, endAngle,bAntiClockwise), where:
- x,y are the center co-ordinates of the arc
- startAngle and endAngle are specified in radians. For e.g. if you wish to draw a semi-circle, you can start with the startAngle at 0 degrees and the endAngle at 180 degrees. Remember that the angle values are specified in radians and not degrees. So you will have to use a handy formula : (Math.PI/180) * AngleInDegrees to convert to a radian value.
- The final parameter is a boolean parameter than is true if you want to start drawing the arc anti-clockwise and false if you want to draw it clockwise.
Let us look at the code below that draws a circle: <!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">
Click to draw a circle
Click to clear </div>Read more: InsideRIA
<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">
Click to draw a circle
Click to clear </div>Read more: InsideRIA
Posts
0 comments:
Post a Comment