| var ctx = document.getElementById('tutorial').getContext('2d'); |
| ctx.fillRect(0,0,300,300); |
| for (var i=0;i<3;i++) { |
| for (var j=0;j<3;j++) { |
| ctx.save(); |
| ctx.strokeStyle = "#9CFF00"; |
| ctx.translate(50+j*100,50+i*100); |
| drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); |
| ctx.restore(); |
| } |
| } |
| |
| function drawSpirograph(ctx,R,r,O){ |
| var x1 = R-O; |
| var y1 = 0; |
| var i = 1; |
| ctx.beginPath(); |
| ctx.moveTo(x1,y1); |
| do { |
| if (i>20000) break; |
| var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) |
| var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) |
| ctx.lineTo(x2,y2); |
| x1 = x2; |
| y1 = y2; |
| i++; |
| } while (x2 != R-O && y2 != 0 ); |
| ctx.stroke(); |
| } |