OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <body> |
| 4 <canvas id ="one" width="100" height="100"></canvas> |
| 5 <canvas id ="two" width="100" height="100"></canvas> |
| 6 <script> |
| 7 function drawCircle(ctx, geom) { |
| 8 var x = geom.width / 2; |
| 9 var y = geom.height / 2; |
| 10 |
| 11 ctx.fillStyle = 'green'; |
| 12 ctx.beginPath(); |
| 13 ctx.ellipse(x, y, x - 1, y - 1, 0, 0, 2 * Math.PI); |
| 14 ctx.fill(); |
| 15 } |
| 16 |
| 17 var ctx1 = document.getElementById('one').getContext('2d'); |
| 18 drawCircle(ctx1, {width: 50, height: 50}); |
| 19 ctx1.translate(50, 0); |
| 20 drawCircle(ctx1, {width: 50, height: 50}); |
| 21 ctx1.resetTransform(); |
| 22 ctx1.translate(0, 50); |
| 23 drawCircle(ctx1, {width: 100, height: 50}); |
| 24 |
| 25 var ctx2 = document.getElementById('two').getContext('2d'); |
| 26 for (var i = 0; i < 5; i++) { |
| 27 drawCircle(ctx2, {width: 50, height: 20}); |
| 28 ctx2.translate(0, 20); |
| 29 } |
| 30 ctx2.resetTransform(); |
| 31 ctx2.translate(50, 25); |
| 32 drawCircle(ctx2, {width: 50, height: 50}); |
| 33 </script> |
| 34 </body> |
| 35 </html> |
OLD | NEW |