OLD | NEW |
1 <sky> | 1 <sky> |
2 <style> | 2 <style> |
3 div { | 3 div { |
4 height: 200px; | 4 height: 200px; |
5 background-color: lightblue; | 5 background-color: lightblue; |
6 } | 6 } |
7 </style> | 7 </style> |
8 <div id="canvas" /> | 8 <div id="canvas" /> |
9 <script> | 9 <script> |
10 import 'dart:math' as math; | 10 import 'dart:math' as math; |
11 import 'dart:sky'; | 11 import 'dart:sky'; |
12 | 12 |
13 void main() { | 13 void main() { |
14 var element = document.getElementById('canvas'); | 14 var element = document.getElementById('canvas'); |
15 element.requestPaint((PaintingContext context) { | 15 element.requestPaint((PaintingContext context) { |
16 Paint paint = new Paint(); | 16 Paint paint = new Paint(); |
17 double radius = math.min(context.width, context.height) / 2.0; | 17 double radius = math.min(context.width, context.height) / 2.0; |
18 | 18 |
19 context.save(); | 19 context.save(); |
20 | 20 |
21 context.clipRect([0.0, 0.0, context.width, radius]); | 21 context.clipRect(new Rect()..setLTRB(0.0, 0.0, context.width, radius)); |
22 | 22 |
23 context.translate(context.width / 2.0, context.height / 2.0); | 23 context.translate(context.width / 2.0, context.height / 2.0); |
24 paint.setARGB(128, 255, 0, 255); | 24 paint.setARGB(128, 255, 0, 255); |
25 context.rotateDegrees(45.0); | 25 context.rotateDegrees(45.0); |
26 context.drawRect([-radius, -radius, radius, radius], paint); | 26 |
| 27 context.drawRect(new Rect()..setLTRB(-radius, -radius, radius, radius), |
| 28 paint); |
27 | 29 |
28 // Scale x and y by 0.5. | 30 // Scale x and y by 0.5. |
29 var scaleMatrix = [ | 31 var scaleMatrix = [ |
30 0.5, 0.0, 0.0, | 32 0.5, 0.0, 0.0, |
31 0.0, 0.5, 0.0, | 33 0.0, 0.5, 0.0, |
32 0.0, 0.0, 1.0 | 34 0.0, 0.0, 1.0 |
33 ]; | 35 ]; |
34 context.concat(scaleMatrix); | 36 context.concat(scaleMatrix); |
35 paint.setARGB(128, 0, 255, 0); | 37 paint.setARGB(128, 0, 255, 0); |
36 context.drawCircle(0.0, 0.0, radius, paint); | 38 context.drawCircle(0.0, 0.0, radius, paint); |
37 | 39 |
38 context.restore(); | 40 context.restore(); |
39 | 41 |
40 context.drawCircle(0.0, 0.0, radius, paint); | 42 context.drawCircle(0.0, 0.0, radius, paint); |
41 | 43 |
42 context.commit(); | 44 context.commit(); |
43 }); | 45 }); |
44 } | 46 } |
45 </script> | 47 </script> |
46 </sky> | 48 </sky> |
OLD | NEW |