OLD | NEW |
---|---|
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <!-- Test based on that found at | 2 <!-- Test based on that found at |
3 http://philip.html5.org/tests/canvas/suite/tests/index.2d.transformation.tr ansform.html | 3 http://philip.html5.org/tests/canvas/suite/tests/index.2d.transformation.tr ansform.html |
4 --> | 4 --> |
5 <title>Canvas test: 2d.transformation.transform.skewed</title> | 5 <title>Canvas test: 2d.transformation.transform.skewed</title> |
6 <canvas id="canvas" class="output" width="100" height="100"><p class="fallback"> FAIL (fallback content)</p></canvas> | 6 <canvas id="canvas" class="output" width="100" height="100"><p class="fallback"> FAIL (fallback content)</p></canvas> |
7 <script> | 7 <script> |
8 if (window.testRunner) | |
9 testRunner.dumpAsTextWithPixelResults(); | |
10 | |
11 var ctx = document.getElementById("canvas").getContext("2d"); | 8 var ctx = document.getElementById("canvas").getContext("2d"); |
12 // Create green with a red square ring inside it | 9 // Create green with a red square ring inside it |
13 ctx.fillStyle = '#0f0'; | 10 ctx.fillStyle = '#0f0'; |
14 ctx.fillRect(0, 0, 100, 100); | 11 ctx.fillRect(0, 0, 100, 100); |
15 ctx.fillStyle = '#f00'; | 12 ctx.fillStyle = '#f00'; |
16 ctx.fillRect(20, 10, 60, 30); | 13 // ctx.fillRect(20, 10, 60, 30); Inset by 1 pixel to allow margin for numerical error. |
Stephen White
2014/03/05 21:29:33
Nit: please remove commented-out code.
| |
14 ctx.fillRect(21, 11, 58, 28); | |
17 ctx.fillStyle = '#0f0'; | 15 ctx.fillStyle = '#0f0'; |
18 ctx.fillRect(40, 20, 20, 10); | 16 // ctx.fillRect(40, 20, 20, 10); Outset by one pixel to allow margin for numeric al error. |
Stephen White
2014/03/05 21:29:33
Same here.
| |
17 ctx.fillRect(39, 19, 22, 12); | |
19 | 18 |
20 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly | 19 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly |
21 ctx.transform(1,4, 2,3, 5,6); | 20 ctx.transform(1,4, 2,3, 5,6); |
22 | 21 |
23 // Post-transform coordinates: | 22 // Post-transform coordinates: |
24 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[4 0,20],[20,10]]; | 23 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[4 0,20],[20,10]]; |
25 // Hence pre-transform coordinates: | 24 // Hence pre-transform coordinates: |
26 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2], | 25 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2], |
27 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2], | 26 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2], |
28 [-7.4,11.2]]; | 27 [-7.4,11.2]]; |
29 ctx.beginPath(); | 28 ctx.beginPath(); |
30 ctx.moveTo(pts[0][0], pts[0][1]); | 29 ctx.moveTo(pts[0][0], pts[0][1]); |
31 for (var i = 0; i < pts.length; ++i) | 30 for (var i = 0; i < pts.length; ++i) |
32 ctx.lineTo(pts[i][0], pts[i][1]); | 31 ctx.lineTo(pts[i][0], pts[i][1]); |
33 ctx.fill(); | 32 ctx.fill(); |
34 </script> | 33 </script> |
OLD | NEW |