I had a hard time understanding how it works.
I created a basic color picture. Seen it here.
The source code:
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = '#736F6E';
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = '#617C58';
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = '#D4A017';
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = '#6698FF';
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = '#C12283';
for (var i = 0; i < 7; i++){
ctx.beginPath();
ctx.arc(75, 75, 10+10 * i, 0, Math.PI * 2, true);
ctx.fill();
}
} The math equation creates the circle thats in the middle of the canvas. Changing the number in
i < 7 will either increase or decrease the size of the circle.
OK, I understand how the four fillRect() methods do what they do, but I don't get what is going on with the arc() method inside the for loop. You are calling:
ReplyDeletectx.arc(75, 75, 10, 0, Math.PI * 2, true);
ctx.arc(75, 75, 20, 0, Math.PI * 2, true);
ctx.arc(75, 75, 30, 0, Math.PI * 2, true);
ctx.arc(75, 75, 40, 0, Math.PI * 2, true);
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.arc(75, 75, 60, 0, Math.PI * 2, true);
ctx.arc(75, 75, 70, 0, Math.PI * 2, true);
For next week, do a google search for more information on the arc() method and see if you can understand why it is being called in a loop like this. Also, isn't there a simple circle() method that would do the same thing in a single call?