Dart - CanvasElement, Duration class, async library, Timer class (徐々に消えていく長方形を描く)

Dart: Up and Running
(O'Reilly Media)
Kathy Walrath Seth Ladd (著)
[Kindle版]
このブログでの感想

開発環境

• OS X Mavericks - Apple (OS)
• Dart Editor (開発環境)
• Dartium | Dart/ Structured web apps (ブラウザ, Dart VM 用 (Chromium with the Dart VM))
• Safari (ブラウザ, JavaScript 用)
• Dart (プログラミング言語)

Head First Java 第2版 ―頭とからだで覚えるJavaの基本(Kathy Sierra (著)、Bert Bates (著)、島田 秋雄 (監修)、神戸 博之 (監修)、高坂 一城 (監修)、夏目 大 (翻訳)、オライリージャパン)の12章(GUIの基礎)、プールパズル(p.396))をDartで考えてみる。

その他参考書籍

• What is Dart? [Kindle版] (O'Reilly Media) Kathy Walrath Seth Ladd (著) このブログでの感想

プールパズル(p.396)

コード

sample.dart

import 'dart:html';
import 'dart:async' as async;

void main() {
  div..append(canvas);
  div.style
      ..width = '650px'
      ..border = 'solid';
  run.style.width = '650px';
  run.onClick.listen((MouseEvent event) {
    x = 1;
    y = 1;
    draw();
  });
}

DivElement div = querySelector('#d0');
ButtonElement run = querySelector('#run_dart');
CanvasElement canvas = new CanvasElement(width: 650, height: 325);
CanvasRenderingContext2D ctx = canvas.context2D;
int x;
int y;
async.Timer t;

void draw() {
  if (x <= 325) {
    ctx
        ..fillStyle = 'white'
        ..strokeStyle = 'white'
        ..fillRect(1, 1, 648, 323)
        ..fill()
        ..fillStyle = 'blue'
        ..strokeStyle = 'blue'
        ..fillRect(x, y, 650 - 2 * x, 325 - 2 * y)
        ..fill();
    x += 2;
    y += 1;
    t = new async.Timer(new Duration(milliseconds: 10), draw);
  }
}