Dart Canvas を使う

dart で Canvas を使うには、document.query() で canvas タグのエレメントを CanvasElement として取得し、その CanvasElement に対して getContext() を呼んで CanvasRenderingContext2D を取得します。

あとは、CanvasRenderingContext2D オブジェクトに対して fillRect() などの Canvas のメソッドを呼べば OK

view plainprint?

1. #import('dart:html');  
2.   
3. class Droid {  
4.   
5.   CanvasRenderingContext2D ctx;  
6.   
7.   static final PI = Math.PI;  
8.   static final String ORANGE = "orange";  
9.   static final String WHITE = "white";  
10.     
11.   static final int gap = 5;  
12.   static final int bodyWidth = 150;  
13.   static final int bodyHeight = 120;  
14.   static final int armWidth = 30;  
15.   static final int armHeight = 70;  
16.   static final int legWidth = 30;  
17.   static final int legHeight = 35;  
18.     
19.   Droid() {  
20.     CanvasElement canvas = document.query("#canvas");  
21.     ctx = canvas.getContext("2d");  
22.       
23.     drawFrame();  
24.   }  
25.   
26.   // Draw the complete figure for the current number of seeds.  
27.   void drawFrame() {  
28.     ctx.clearRect(0, 0, 300, 300);  
29.       
30.     ctx.lineWidth = 2;  
31.     ctx.fillStyle = ORANGE;  
32.     ctx.strokeStyle = ORANGE;  
33.   
34.     ctx.save();  
35.       
36.     // head  
37.     ctx.beginPath();  
38.     ctx.translate(0, bodyWidth / 2 * 0.13);  
39.     ctx.scale(1, 0.9);  
40.     ctx.arc(100 + bodyWidth / 2, 100 - gap, bodyWidth / 2, PI, 0, false);  
41.     ctx.fill();  
42.     ctx.closePath();  
43.   
44.     ctx.restore();  
45.       
46.     // body  
47.     ctx.beginPath();  
48.     ctx.moveTo(100, 100);  
49.     ctx.lineTo(100 + bodyWidth, 100);  
50.     ctx.arc(100 + bodyWidth - 15, 100 + bodyHeight - 15, 15, 0, PI / 2, false);  
51.     ctx.arc(100 + 15, 100 + bodyHeight - 15, 15, PI / 2, PI, false);  
52.     ctx.fill();  
53.     ctx.closePath();  
54.   
55.       
56.     // legs left  
57.     drawLeg(100 + bodyWidth / 2 - 15 - legWidth, 100 + bodyHeight);  
58.   
59.     // legs rihgt  
60.     drawLeg(100 + bodyWidth / 2 + 15, 100 + bodyHeight);  
61.   
62.       
63.     // arms left  
64.     drawArm(100 - gap - armWidth, 100 + armWidth / 2);  
65.   
66.     // arms right  
67.     drawArm(100 + bodyWidth + gap, 100 + armWidth / 2);      
68.   
69.     // nidle right  
70.     ctx.lineWidth = 5;  
71.     ctx.lineCap = "round";  
72.       
73.     ctx.beginPath();  
74.     ctx.moveTo(100 + bodyWidth / 2 - 45, 12);  
75.     ctx.lineTo(100 + bodyWidth / 2 - 20, 60);  
76.     ctx.closePath();  
77.     ctx.stroke();  
78.   
79.     // nidle left  
80.     ctx.beginPath();  
81.     ctx.moveTo(100 + bodyWidth / 2 + 45, 12);  
82.     ctx.lineTo(100 + bodyWidth / 2 + 20, 60);  
83.     ctx.closePath();  
84.     ctx.stroke();  
85.   
86.       
87.     // eye  
88.     ctx.fillStyle = WHITE;  
89.   
90.     ctx.beginPath();  
91.     ctx.arc(100 + bodyWidth / 2 - 34, 65, 6, 0, 2 * PI, false);  
92.     ctx.fill();  
93.     ctx.closePath();  
94.   
95.     ctx.beginPath();  
96.     ctx.arc(100 + bodyWidth / 2 + 34, 65, 6, 0, 2 * PI, false);  
97.     ctx.fill();  
98.     ctx.closePath();  
99.   }  
100.     
101.   void drawArm(int left, int top) {  
102.     ctx.beginPath();  
103.     ctx.arc(left + armWidth / 2, top, armWidth / 2, PI, 0, false);  
104.     ctx.lineTo(left + armWidth, top + armHeight);  
105.     ctx.arc(left + armWidth / 2, top + armHeight, armWidth / 2, 0, PI, false);  
106.     ctx.lineTo(left, top);  
107.     ctx.fill();  
108.     ctx.closePath();  
109.   }  
110.     
111.   void drawLeg(int left, int top) {  
112.     ctx.beginPath();  
113.     ctx.moveTo(left, top);  
114.     ctx.lineTo(left, top + legHeight);  
115.     ctx.arc(left + legWidth / 2, top + legHeight, legWidth / 2, PI, 0, true);  
116.     ctx.lineTo(left + legWidth, top);  
117.     ctx.fill();  
118.     ctx.closePath();  
119.   }  
120. }  
121.   
122. void main() {  
123.   new Droid();  
124. }  

#import('dart:html'); class Droid { CanvasRenderingContext2D ctx; static final PI = Math.PI; static final String ORANGE = "orange"; static final String WHITE = "white"; static final int gap = 5; static final int bodyWidth = 150; static final int bodyHeight = 120; static final int armWidth = 30; static final int armHeight = 70; static final int legWidth = 30; static final int legHeight = 35; Droid() { CanvasElement canvas = document.query("#canvas"); ctx = canvas.getContext("2d"); drawFrame(); } // Draw the complete figure for the current number of seeds. void drawFrame() { ctx.clearRect(0, 0, 300, 300); ctx.lineWidth = 2; ctx.fillStyle = ORANGE; ctx.strokeStyle = ORANGE; ctx.save(); // head ctx.beginPath(); ctx.translate(0, bodyWidth / 2 * 0.13); ctx.scale(1, 0.9); ctx.arc(100 + bodyWidth / 2, 100 - gap, bodyWidth / 2, PI, 0, false); ctx.fill(); ctx.closePath(); ctx.restore(); // body ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(100 + bodyWidth, 100); ctx.arc(100 + bodyWidth - 15, 100 + bodyHeight - 15, 15, 0, PI / 2, false); ctx.arc(100 + 15, 100 + bodyHeight - 15, 15, PI / 2, PI, false); ctx.fill(); ctx.closePath(); // legs left drawLeg(100 + bodyWidth / 2 - 15 - legWidth, 100 + bodyHeight); // legs rihgt drawLeg(100 + bodyWidth / 2 + 15, 100 + bodyHeight); // arms left drawArm(100 - gap - armWidth, 100 + armWidth / 2); // arms right drawArm(100 + bodyWidth + gap, 100 + armWidth / 2); // nidle right ctx.lineWidth = 5; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(100 + bodyWidth / 2 - 45, 12); ctx.lineTo(100 + bodyWidth / 2 - 20, 60); ctx.closePath(); ctx.stroke(); // nidle left ctx.beginPath(); ctx.moveTo(100 + bodyWidth / 2 + 45, 12); ctx.lineTo(100 + bodyWidth / 2 + 20, 60); ctx.closePath(); ctx.stroke(); // eye ctx.fillStyle = WHITE; ctx.beginPath(); ctx.arc(100 + bodyWidth / 2 - 34, 65, 6, 0, 2 * PI, false); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(100 + bodyWidth / 2 + 34, 65, 6, 0, 2 * PI, false); ctx.fill(); ctx.closePath(); } void drawArm(int left, int top) { ctx.beginPath(); ctx.arc(left + armWidth / 2, top, armWidth / 2, PI, 0, false); ctx.lineTo(left + armWidth, top + armHeight); ctx.arc(left + armWidth / 2, top + armHeight, armWidth / 2, 0, PI, false); ctx.lineTo(left, top); ctx.fill(); ctx.closePath(); } void drawLeg(int left, int top) { ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(left, top + legHeight); ctx.arc(left + legWidth / 2, top + legHeight, legWidth / 2, PI, 0, true); ctx.lineTo(left + legWidth, top); ctx.fill(); ctx.closePath(); } } void main() { new Droid(); }

view plainprint?

1. <!DOCTYPE html>  
2.   
3. <html>  
4.   <head>  
5.     <title>Droid</title>  
6.   </head>  
7.   <body>  
8.     <h1>Droid</h1>  
9.       
10.     <div>  
11.         <canvas id="canvas" width="300" height="300"></canvas>  
12.     </div>  
13.       
14.     <script type="application/dart" src="MoveDroid.dart"></script>  
15.     <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>  
16.   </body>  
17. </html>  

<!DOCTYPE html> <html> <head> <title>Droid</title> </head> <body> <h1>Droid</h1> <div> <canvas id="canvas" width="300" height="300"></canvas> </div> <script type="application/dart" src="MoveDroid.dart"></script> <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> </body> </html>