Arcs
In this chapter you will learn:
Drawing Arcs
We use the arc and arcTo methods to draw arcs on the canvas.
| Name | Description | Returns |
|---|---|---|
| arc(x, y, rad, startAngle, endAngle,direction) | Draws an arc to (x, y) with radius rad, start angle startAngle, and finish angle endAngle. | void |
| arcTo(x1, y1, x2, y2,rad) | Draw an arc to (x2, y2) that passes (x1, y1) and has radius rad | void |
<!DOCTYPE HTML><!-- ja v a2s . c o m-->
<html>
<head>
<style>
canvas {
border: thin solid black
}
body>* {
float: left;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="840">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var point1 = [ 100, 10 ];
var point2 = [ 200, 10 ];
var point3 = [ 200, 110 ];
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.arcTo(50, 110, 40, 70, 100);
ctx.stroke();
drawPoint(100, 200);
drawPoint(20, 110);
drawPoint(20, 70);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(100, 110);
ctx.lineTo(20, 70);
ctx.stroke();
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x - 2, y - 2, 4, 4);
}
</script>
</body>
</html>
Using the arc Method
arc(x, y, radiusOfArc, startAngle, endAngle, clockwiseTrueOrFalse);
<!DOCTYPE HTML><!-- jav a 2 s.c o m-->
<html>
<head>
<style>
canvas {
border: thin solid black
}
body>* {
float: left;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "yellow";
ctx.lineWidth = "3";
ctx.beginPath();
ctx.arc(200, 70, 60, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 70, 60, Math.PI / 2, Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
var val = 0;
for ( var i = 0; i < 4; i++) {
ctx.arc(50, 70, 60, val, val + Math.PI / 4, false);
val += Math.PI / 2;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
Home » Javascript Tutorial » Canvas