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:typed_data'; | 11 import 'dart:typed_data'; |
12 import 'dart:sky'; | 12 import 'dart:sky'; |
13 | 13 |
14 void main() { | 14 void main() { |
15 var element = document.getElementById('canvas'); | 15 var element = document.getElementById('canvas'); |
16 element.requestPaint((PaintingContext context) { | 16 element.requestPaint((PaintingContext context) { |
17 Paint paint = new Paint(); | 17 Paint paint = new Paint(); |
18 Point mid = new Point(context.width / 2.0, context.height / 2.0); | 18 Point mid = new Point(context.width / 2.0, context.height / 2.0); |
19 double radius = math.min(mid.x, mid.y); | 19 double radius = math.min(mid.x, mid.y); |
20 | 20 |
21 context.save(); | 21 context.save(); |
22 | 22 |
23 context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius)); | 23 context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius)); |
24 | 24 |
25 context.translate(mid.x, mid.y); | 25 context.translate(mid.x, mid.y); |
26 paint.color = const Color.fromARGB(128, 255, 0, 255); | 26 paint.color = const Color.fromARGB(128, 255, 0, 255); |
27 context.rotateDegrees(45.0); | 27 context.rotate(math.PI/4.0); |
28 | 28 |
29 Gradient yellowBlue = new Gradient.Linear( | 29 Gradient yellowBlue = new Gradient.Linear( |
30 [new Point(-radius, -radius), new Point(0.0, 0.0)], | 30 [new Point(-radius, -radius), new Point(0.0, 0.0)], |
31 [const Color(0xFFFFFF00), const Color(0xFF0000FF)], | 31 [const Color(0xFFFFFF00), const Color(0xFF0000FF)], |
32 null); | 32 null); |
33 context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius), | 33 context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius), |
34 new Paint()..setShader(yellowBlue)); | 34 new Paint()..setShader(yellowBlue)); |
35 | 35 |
36 // Scale x and y by 0.5. | 36 // Scale x and y by 0.5. |
37 var scaleMatrix = new Float32List.fromList([ | 37 var scaleMatrix = new Float32List.fromList([ |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
75 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); | 75 layerPaint.color = const Color.fromARGB(128, 255, 0, 0); |
76 }); | 76 }); |
77 paint.setDrawLooper(builder.build()); | 77 paint.setDrawLooper(builder.build()); |
78 context.drawCircle(0.0, 0.0, radius, paint); | 78 context.drawCircle(0.0, 0.0, radius, paint); |
79 | 79 |
80 context.commit(); | 80 context.commit(); |
81 }); | 81 }); |
82 } | 82 } |
83 </script> | 83 </script> |
84 </sky> | 84 </sky> |
OLD | NEW |