Y.A.M の雑記帳: Dart　Canvas を使う

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>

Y.A.M の雑記帳

2012年4月5日木曜日

Dart　Canvas を使う

0 件のコメント:

コメントを投稿

2012年4月5日木曜日

Dart Canvas を使う

0 件のコメント:

コメントを投稿

Dart　Canvas を使う