diff options
Diffstat (limited to 'examples/script/context2d/scripts/translate.js')
-rw-r--r-- | examples/script/context2d/scripts/translate.js | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/examples/script/context2d/scripts/translate.js b/examples/script/context2d/scripts/translate.js new file mode 100644 index 0000000..7c94433 --- /dev/null +++ b/examples/script/context2d/scripts/translate.js @@ -0,0 +1,29 @@ + 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(); +} |