2012年4月5日木曜日

Dart Canvas を使う

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

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

#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(); }

<!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>







0 件のコメント:

コメントを投稿