<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3px solid #FFFF00;"></canvas>
<!--Setting of size of Canvas-->
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.strokeStyle = 'red';
<!--Setting of color of arc-->
var x = canvas.width / 2;<!--center of x axis-->
var y = canvas.height / 2;<!--center of y axis-->
var r = 100;
var st = 0 * Math.PI;
var end = 1.0 * Math.PI;
var cc = false;
context.beginPath();
context.arc(x, y, r, st, end, cc);
<!--centre,radius,start angle,end angle and cc means counter clockwise-->
context.lineWidth = 7;
<!--setting of line width-->
context.stroke();<!--stroke is used to draw arc-->
context.strokeStyle = 'green';
<!--Setting of color of arc-->
var r1 = 120;
var st1 = 0 * Math.PI;
var end1 = 1.0 * Math.PI;
var cc1 = true;
context.beginPath();
context.arc(x, y, r1, st1, end1, cc1);
<!--centre,radius,start angle,end angle and cc means counter clockwise-->
context.lineWidth = 7;
<!--setting of line width-->
context.stroke();<!--stroke is used to draw arc-->
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.