OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head></head> | |
4 <body> | |
5 <canvas id="mycanvas" width="400" height="200"></canvas> | |
6 <script src="../js/resources/js-test-pre.js"></script> | |
7 <script> | |
8 description("This tests checks that arc can draw correct circumferences with lin eTo."); | |
9 var canvas = document.getElementById('mycanvas'); | |
10 var ctx = canvas.getContext('2d'); | |
11 | |
12 ctx.lineWidth = 7; | |
13 ctx.fillStyle = 'rgb(255, 255, 255)'; | |
14 ctx.strokeStyle = 'rgb(0, 0, 0)'; | |
15 ctx.fillRect(0, 0, canvas.width, canvas.height); | |
16 | |
17 var imageData = ctx.getImageData(1, 1, 1, 1); | |
18 shouldBe("imageData.data[1]", "255"); | |
19 | |
20 debug("Check clockwise circumference."); | |
21 debug(" 1. sweepAngle == 2PI"); | |
22 ctx.save(); | |
23 ctx.beginPath(); | |
24 ctx.moveTo(0, 10); | |
25 ctx.arc(60, 50, 30, -Math.PI, Math.PI, false); | |
alph
2013/07/10 13:06:29
How about drawing e.g. 100 arcs in a loop to form
dshwang
2013/07/10 13:36:42
good idea! I'll do it. I hope that making bitmaps
| |
26 ctx.lineTo(0, 90); | |
27 ctx.stroke(); | |
28 ctx.restore(); | |
29 | |
30 imageData = ctx.getImageData(14, 29, 1, 1); | |
31 shouldBe("imageData.data[1]", "0"); | |
32 imageData = ctx.getImageData(16, 68, 1, 1); | |
33 shouldBe("imageData.data[1]", "0"); | |
34 imageData = ctx.getImageData(40, 26, 1, 1); | |
35 shouldBe("imageData.data[1]", "0"); | |
36 imageData = ctx.getImageData(80, 28, 1, 1); | |
37 shouldBe("imageData.data[1]", "0"); | |
38 imageData = ctx.getImageData(80, 72, 1, 1); | |
39 shouldBe("imageData.data[1]", "0"); | |
40 imageData = ctx.getImageData(40, 74, 1, 1); | |
41 shouldBe("imageData.data[1]", "0"); | |
42 | |
43 debug(" 2. sweepAngle == PI"); | |
44 ctx.translate(100, 0); | |
45 ctx.save(); | |
46 ctx.beginPath(); | |
47 ctx.moveTo(0, 10); | |
48 ctx.arc(60, 50, 30, -Math.PI, 0, false); | |
49 ctx.lineTo(0, 90); | |
50 ctx.stroke(); | |
51 ctx.restore(); | |
52 | |
53 imageData = ctx.getImageData(114, 29, 1, 1); | |
54 shouldBe("imageData.data[1]", "0"); | |
55 imageData = ctx.getImageData(174, 56, 1, 1); | |
56 shouldBe("imageData.data[1]", "0"); | |
57 imageData = ctx.getImageData(140, 26, 1, 1); | |
58 shouldBe("imageData.data[1]", "0"); | |
59 imageData = ctx.getImageData(180, 28, 1, 1); | |
60 shouldBe("imageData.data[1]", "0"); | |
61 imageData = ctx.getImageData(180, 72, 1, 1); | |
62 shouldBe("imageData.data[1]", "255"); | |
63 imageData = ctx.getImageData(152, 79, 1, 1); | |
64 shouldBe("imageData.data[1]", "255"); | |
65 | |
66 debug(" 3. sweepAngle > 2PI"); | |
67 ctx.translate(100, 0); | |
68 ctx.save(); | |
69 ctx.beginPath(); | |
70 ctx.moveTo(0, 10); | |
71 ctx.arc(60, 50, 30, -Math.PI, Math.PI * 2.5, false); | |
72 ctx.lineTo(0, 90); | |
73 ctx.stroke(); | |
74 ctx.restore(); | |
75 | |
76 imageData = ctx.getImageData(214, 29, 1, 1); | |
77 shouldBe("imageData.data[1]", "0"); | |
78 imageData = ctx.getImageData(240, 83, 1, 1); | |
79 shouldBe("imageData.data[1]", "0"); | |
80 imageData = ctx.getImageData(240, 26, 1, 1); | |
81 shouldBe("imageData.data[1]", "0"); | |
82 imageData = ctx.getImageData(280, 28, 1, 1); | |
83 shouldBe("imageData.data[1]", "0"); | |
84 imageData = ctx.getImageData(280, 72, 1, 1); | |
85 shouldBe("imageData.data[1]", "0"); | |
86 imageData = ctx.getImageData(240, 74, 1, 1); | |
87 shouldBe("imageData.data[1]", "0"); | |
88 | |
89 debug(" 4. sweepAngle < 0"); | |
90 ctx.translate(100, 0); | |
91 ctx.save(); | |
92 ctx.beginPath(); | |
93 ctx.moveTo(0, 10); | |
94 ctx.arc(60, 50, 30, Math.PI * 1.5, -Math.PI, false); | |
95 ctx.lineTo(0, 90); | |
96 ctx.stroke(); | |
97 ctx.restore(); | |
98 | |
99 imageData = ctx.getImageData(336, 16, 1, 1); | |
100 shouldBe("imageData.data[1]", "0"); | |
101 imageData = ctx.getImageData(316, 68, 1, 1); | |
102 shouldBe("imageData.data[1]", "0"); | |
103 imageData = ctx.getImageData(340, 26, 1, 1); | |
104 shouldBe("imageData.data[1]", "255"); | |
105 imageData = ctx.getImageData(380, 28, 1, 1); | |
106 shouldBe("imageData.data[1]", "0"); | |
107 imageData = ctx.getImageData(380, 72, 1, 1); | |
108 shouldBe("imageData.data[1]", "0"); | |
109 imageData = ctx.getImageData(340, 74, 1, 1); | |
110 shouldBe("imageData.data[1]", "0"); | |
111 | |
112 debug("Check anticlockwise circumference."); | |
113 debug(" 1. sweepAngle == 2PI"); | |
114 ctx.translate(-300, 100); | |
115 ctx.save(); | |
116 ctx.beginPath(); | |
117 ctx.moveTo(0, 10); | |
118 ctx.arc(60, 50, 30, Math.PI, -Math.PI, true); | |
119 ctx.lineTo(0, 90); | |
120 ctx.stroke(); | |
121 ctx.restore(); | |
122 | |
123 imageData = ctx.getImageData(14, 129, 1, 1); | |
124 shouldBe("imageData.data[1]", "0"); | |
125 imageData = ctx.getImageData(16, 168, 1, 1); | |
126 shouldBe("imageData.data[1]", "0"); | |
127 imageData = ctx.getImageData(40, 126, 1, 1); | |
128 shouldBe("imageData.data[1]", "0"); | |
129 imageData = ctx.getImageData(80, 128, 1, 1); | |
130 shouldBe("imageData.data[1]", "0"); | |
131 imageData = ctx.getImageData(80, 172, 1, 1); | |
132 shouldBe("imageData.data[1]", "0"); | |
133 imageData = ctx.getImageData(40, 174, 1, 1); | |
134 shouldBe("imageData.data[1]", "0"); | |
135 | |
136 debug(" 2. sweepAngle == PI"); | |
137 ctx.translate(100, 0); | |
138 ctx.save(); | |
139 ctx.beginPath(); | |
140 ctx.moveTo(0, 10); | |
141 ctx.arc(60, 50, 30, Math.PI, 0, true); | |
142 ctx.lineTo(0, 90); | |
143 ctx.stroke(); | |
144 ctx.restore(); | |
145 | |
146 imageData = ctx.getImageData(14, 129, 1, 1); | |
147 shouldBe("imageData.data[1]", "0"); | |
148 imageData = ctx.getImageData(158, 164, 1, 1); | |
149 shouldBe("imageData.data[1]", "0"); | |
150 imageData = ctx.getImageData(140, 126, 1, 1); | |
151 shouldBe("imageData.data[1]", "255"); | |
152 imageData = ctx.getImageData(180, 128, 1, 1); | |
153 shouldBe("imageData.data[1]", "255"); | |
154 imageData = ctx.getImageData(180, 172, 1, 1); | |
155 shouldBe("imageData.data[1]", "0"); | |
156 imageData = ctx.getImageData(140, 174, 1, 1); | |
157 shouldBe("imageData.data[1]", "0"); | |
158 | |
159 debug(" 3. sweepAngle > 2PI"); | |
160 ctx.translate(100, 0); | |
161 ctx.save(); | |
162 ctx.beginPath(); | |
163 ctx.moveTo(0, 10); | |
164 ctx.arc(60, 50, 30, Math.PI, Math.PI * -1.5, true); | |
165 ctx.lineTo(0, 90); | |
166 ctx.stroke(); | |
167 ctx.restore(); | |
168 | |
169 imageData = ctx.getImageData(214, 129, 1, 1); | |
170 shouldBe("imageData.data[1]", "0"); | |
171 imageData = ctx.getImageData(240, 183, 1, 1); | |
172 shouldBe("imageData.data[1]", "0"); | |
173 imageData = ctx.getImageData(240, 126, 1, 1); | |
174 shouldBe("imageData.data[1]", "0"); | |
175 imageData = ctx.getImageData(280, 128, 1, 1); | |
176 shouldBe("imageData.data[1]", "0"); | |
177 imageData = ctx.getImageData(280, 172, 1, 1); | |
178 shouldBe("imageData.data[1]", "0"); | |
179 imageData = ctx.getImageData(240, 174, 1, 1); | |
180 shouldBe("imageData.data[1]", "0"); | |
181 | |
182 debug(" 4. sweepAngle < 0"); | |
183 ctx.translate(100, 0); | |
184 ctx.save(); | |
185 ctx.beginPath(); | |
186 ctx.moveTo(0, 10); | |
187 ctx.arc(60, 50, 30, Math.PI * -1.5, Math.PI, true); | |
188 ctx.lineTo(0, 90); | |
189 ctx.stroke(); | |
190 ctx.restore(); | |
191 | |
192 imageData = ctx.getImageData(314, 129, 1, 1); | |
193 shouldBe("imageData.data[1]", "0"); | |
194 imageData = ctx.getImageData(316, 168, 1, 1); | |
195 shouldBe("imageData.data[1]", "0"); | |
196 imageData = ctx.getImageData(340, 126, 1, 1); | |
197 shouldBe("imageData.data[1]", "0"); | |
198 imageData = ctx.getImageData(380, 128, 1, 1); | |
199 shouldBe("imageData.data[1]", "0"); | |
200 imageData = ctx.getImageData(380, 172, 1, 1); | |
201 shouldBe("imageData.data[1]", "0"); | |
202 imageData = ctx.getImageData(340, 174, 1, 1); | |
203 shouldBe("imageData.data[1]", "255"); | |
204 | |
205 </script> | |
206 <script src="../js/resources/js-test-post.js"></script> | |
207 </body> | |
208 </html> | |
209 | |
OLD | NEW |