OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <script> | 5 <script> |
6 function debug(str) { | 6 function debug(str) { |
7 var c = document.getElementById('console') | 7 var c = document.getElementById('console') |
8 c.appendChild(document.createTextNode(str + '\n')); | 8 c.appendChild(document.createTextNode(str + '\n')); |
9 } | 9 } |
10 | 10 |
11 var numErrs = 0; | 11 var numErrs = 0; |
12 | 12 |
13 function getContext(id) { | 13 function getContext(id) { |
14 return document.getElementById(id).getContext('2d'); | 14 return document.getElementById(id).getContext('2d'); |
15 } | 15 } |
16 | 16 |
17 function imageLoaded() { | 17 function imageLoaded() { |
18 var c1 = getContext('canvas1') | 18 var c1 = getContext('canvas1') |
19 c1.drawImage(i, 0, 0, i.width * 2, i.height * 2) | 19 c1.drawImage(i, 0, 0, i.width * 2, i.height * 2) |
20 | 20 |
21 var c2 = getContext('canvas2'); | 21 var c2 = getContext('canvas2'); |
22 c2.drawImageFromRect(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height, 'o
ver') | 22 c2.drawImage(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height) |
23 | 23 |
24 var c3 = getContext('canvas3'); | 24 var c3 = getContext('canvas3'); |
25 var pattern = c3.createPattern(i, 'repeat'); | 25 var pattern = c3.createPattern(i, 'repeat'); |
26 c3.fillStyle = pattern; | 26 c3.fillStyle = pattern; |
27 c3.arc(75, 75, 60, 0, 2*Math.PI, 0); | 27 c3.arc(75, 75, 60, 0, 2*Math.PI, 0); |
28 c3.fill(); | 28 c3.fill(); |
29 | 29 |
30 var c4 = getContext('canvas4'); | 30 var c4 = getContext('canvas4'); |
31 var pattern = c4.createPattern(i, 'no-repeat'); | 31 var pattern = c4.createPattern(i, 'no-repeat'); |
32 c4.fillStyle = pattern; | 32 c4.fillStyle = pattern; |
(...skipping 16 matching lines...) Expand all Loading... |
49 i = new Image(); | 49 i = new Image(); |
50 i.onload = imageLoaded; | 50 i.onload = imageLoaded; |
51 i.src = 'resources/apple.gif'; | 51 i.src = 'resources/apple.gif'; |
52 } | 52 } |
53 | 53 |
54 </script> | 54 </script> |
55 </head> | 55 </head> |
56 <body onload="runTests();" style="overflow:hidden;"> | 56 <body onload="runTests();" style="overflow:hidden;"> |
57 <p>This tests that the Image JavaScript object works as expected when used in a
canvas. If the test is successful, the Apple logo should appear scaled, normal a
nd finally tiled in a circle.</p> | 57 <p>This tests that the Image JavaScript object works as expected when used in a
canvas. If the test is successful, the Apple logo should appear scaled, normal a
nd finally tiled in a circle.</p> |
58 <div><canvas id="canvas1" width="150" height="150"></canvas>Using drawImage.</di
v> | 58 <div><canvas id="canvas1" width="150" height="150"></canvas>Using drawImage.</di
v> |
59 <div><canvas id="canvas2" width="150" height="150"></canvas>Using drawImageFromR
ect.</div> | 59 <div><canvas id="canvas2" width="150" height="150"></canvas>Using drawImage with
source rectangle.</div> |
60 <div><canvas id="canvas3" width="150" height="150"></canvas>Using ImagePattern.<
/div> | 60 <div><canvas id="canvas3" width="150" height="150"></canvas>Using ImagePattern.<
/div> |
61 <div><canvas id="canvas4" width="150" height="150"></canvas>Using ImagePattern a
nd rotation.</div> | 61 <div><canvas id="canvas4" width="150" height="150"></canvas>Using ImagePattern a
nd rotation.</div> |
62 | 62 |
63 <pre id="console"> | 63 <pre id="console"> |
64 </pre> | 64 </pre> |
65 </body> | 65 </body> |
66 </html> | 66 </html> |
OLD | NEW |