Dart - 図形の描画(CanvasElement 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.370))をDartで考えてみる。

その他参考書籍

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

自分で考えてみよう(p.370)

コード

sample.dart

import 'dart:html';
import 'dart:math' as math;

void main() {
  ctx
      ..fillStyle = 'black'
      ..fillRect(0, 0, 300, 300)
      ..arc(120, 120, 50, 0, 2 * math.PI);
  changeColor();
  div
      ..style.width = '300px'
      ..append(canvas)
      ..append(button);
  button
      ..style.width = '300px'
      ..text = 'Change colors'
      ..onClick.listen((MouseEvent event) => changeColor());
}

ButtonElement run = querySelector('#run_dart');
DivElement div = querySelector('#div_canvas');
ButtonElement button = new ButtonElement();
CanvasElement canvas = new CanvasElement(width: 300, height: 300);
CanvasRenderingContext2D ctx = canvas.context2D;
math.Random random = new math.Random();

void changeColor() {
  int red = random.nextInt(255);
  int green = random.nextInt(255);
  int blue = random.nextInt(255);
  ctx
      ..fillStyle = '#' + [red, green, blue].map((int x) => x.toRadixString(16)
          ).join('')
      ..fill();
}

Canvas