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 |