31 lines
916 B
JavaScript
31 lines
916 B
JavaScript
var canvas = document.getElementById('tutorial');
|
|
|
|
// Make sure we don't execute when canvas isn't supported
|
|
if (canvas.getContext){
|
|
|
|
// use getContext to use the canvas for drawing
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
// Draw shapes
|
|
for (i=0;i<4;i++){
|
|
for(j=0;j<3;j++){
|
|
ctx.beginPath();
|
|
var x = 25+j*50; // x coordinate
|
|
var y = 25+i*50; // y coordinate
|
|
var radius = 20; // Arc radius
|
|
var startAngle = 0; // Starting point on circle
|
|
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
|
|
var clockwise = i%2==0 ? false : true; // clockwise or anticlockwise
|
|
|
|
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
|
|
|
|
if (i>1){
|
|
ctx.fill();
|
|
} else {
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|