| 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 |