OLD | NEW |
1 <body> | 1 <body> |
2 <p>Test canvas arc() start / end points when the arc is >= 360 degrees. The resu
lt should be a circle with two line segments connected to the left hand side, to
wards the top left and bottom left corners. | 2 <p>Test canvas arc() start / end points when the arc is >= 360 degrees. The resu
lt should be a circle with two line segments connected to the left hand side, to
wards the top left and bottom left corners. |
3 <canvas id="mycanvas" width="400" height="400"></canvas> | 3 <canvas id="mycanvas" width="400" height="400"></canvas> |
4 <script> | 4 <script> |
5 if (window.testRunner) | 5 if (window.testRunner) |
6 testRunner.dumpAsText(true); | 6 testRunner.dumpAsText(true); |
7 | 7 |
8 var canvas = document.getElementById('mycanvas'); | 8 var canvas = document.getElementById('mycanvas'); |
9 var ctx = canvas.getContext('2d'); | 9 var ctx = canvas.getContext('2d'); |
10 var cx = 200, cy = 200, radius = 100; | 10 var cx = 200, cy = 200, radius = 100; |
11 function deg2rad(x) { | |
12 return x * 3.141592653589 / 180; | |
13 } | |
14 ctx.lineWidth = 10; | 11 ctx.lineWidth = 10; |
15 ctx.beginPath(); | 12 ctx.beginPath(); |
16 ctx.moveTo(0, 100); | 13 ctx.moveTo(0, 100); |
17 ctx.arc(cx, cy, radius, deg2rad(-180), deg2rad(180), false); | 14 ctx.arc(cx, cy, radius, -Math.PI, Math.PI, false); |
18 ctx.lineTo(0, 300); | 15 ctx.lineTo(0, 300); |
19 ctx.stroke(); | 16 ctx.stroke(); |
20 </script> | 17 </script> |
21 </body> | 18 </body> |
OLD | NEW |