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