Help us understand the problem. What is going on with this article?

Angular 4でcanvas要素を扱う方法

More than 3 years have passed since last update.

Angular 4の話

AngularでHTML5のcanvas要素とどうやったら連携できるのか調べてみました。TypeScript 2.2, Angular 4での書き方です。

動作サンプル

動作サンプルはPlunkerにアップしておきました。

手順の解説

  1. template内のセレクターにID値を割り当てておく。ID値の割り当て方はAngularの記法を使う。(例 : <canvas #hoge></canvas>)
  2. クラスではAfterViewInitインターフェースをimplementsキーワードで指定。これによってngAfterViewInit ()メソッド(ライフサイクル)の実装が義務付けられる。
  3. クラスのメンバー変数にViewChildアノテーションでID値を使って関連付けを行う。
  4. ngAfterViewInit ()メソッドではcanvas要素の参照がとれるようになるになる。このとき、nativeElementプロパティーがその名のとおりHTML要素の生エレメントとなる。

具体的なコードサンプル

生HTML5 Canvasを制御するコードです。最もシンプルな例なので、コードも少なく参考にしやすいかと思います。

import {AfterViewInit, Component, DoCheck, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <canvas #myCanvas width="400" height="400"></canvas>
      <div>
        幅 <input type="range" min="1" max="400" [(ngModel)]="rectW"/><br/>
        高さ <input type="range" min="1" max="400" [(ngModel)]="rectH"/><br/>
        塗りの色 <input type="color" [(ngModel)]="rectColor" placeholder="color" value="{{rectColor}}"/>
      </div>
    </div>
  `,
  styles: [`canvas {
    background: lightgray;
  }`]
})
export class AppComponent implements AfterViewInit, DoCheck {
  rectW = 100;
  rectH = 100;
  rectColor = '#FF0000';
  context: CanvasRenderingContext2D;

  @ViewChild('myCanvas') myCanvas;

  ngAfterViewInit() {
    // 参照をとれる
    const canvas = this.myCanvas.nativeElement;
    this.context = canvas.getContext('2d');

    this.draw();
  }

  /** 値の変更時を監視するライフサイクルイベント */
  ngDoCheck() {
    this.draw();
  }

  /** Canvas要素を更新します。 */
  draw() {
    const ctx = this.context;
    if (ctx) {
      ctx.clearRect(0, 0, 400, 400);
      ctx.fillStyle = this.rectColor;
      ctx.fillRect(0, 0, this.rectW, this.rectH);
    }
  }
}

具体的な事例

Webサイト「HTML5製のデザインツール Particle Develop - ICS」の開発で、この手法で実装しました。画面左側のHTML5 Canvasの実装は直接APIを叩くのではなく、フレームワークとして「CreateJS」を使っています。

展望

canvas要素を使えばグラフ描画やビジュアライゼーションに役立ちます。Angularはコンポーネント思考なので、canvas要素を内包したコンポーネントが増えればみんなハッピーになるような気がします。

変更履歴

  • 2017/04/20 : Angular 2 BetaからAngular 4へ変更しました
clockmaker
ウェブ制作会社ICSの代表および ics.media 編集長をやっています。得意分野はプログラミングアート、インタラクティブ表現の制作。詳しくはリンク先を御覧ください。 https://ics.media/entry/author/ikeda
http://clockmaker.jp/labs/
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away