Canvas2Dについてさっくり復習してみた

概要

ryokio0129です。

JavaScript Advent Calendar 2020 6日目になります。
初参加です。よろしくお願いいたします。

canvasへの描画に関して、昨今色々なフレームワークやライブラリがあり、そちらを使うことが多いと思います。
かくいう私も、仕事では Phaser というHTML5ゲームフレームワークを使っていることが多いです。

そんな中、たまたま素のCanavs2Dを触らないといけない状況が発生したので、さっくり復習していきます！

Canvas2Dをさっくり復習するどん

Canvas2Dのコンテキスト取得

WebGLにしてもCanvas2Dにしても、HTMLCanvasElementからコンテキストを取得しないと描画できないです。
Canvas2Dに関してはCanvasRenderingContext2Dを取得します。

See the Pen Canvas2Dのコンテキストを取得 by ryokio (@ryokio) on CodePen.

矩形・テキストの描画

矩形の描画は context.fillRect(x, y, width, height)。
テキストの描画は context.fillText(text, x, y)。

さくっと描画できますが、現状だとどちらも黒で何がなんだかわからないですね……。

See the Pen 矩形・テキストの描画 by ryokio (@ryokio) on CodePen.

色を指定する

色……特に塗りつぶすための色を指定するのは context.fillStyle を使います。
context.fillStyle はCSSの指定そのまま使えるので、例えば context.fillStyle = rgba(255, 0, 0, 0.1) のようにすると、不透明度も反映することが可能です。

色は変わりましたが、これだとどちらも同じ色になってしまいます。
これだと困りますね……。

See the Pen 色を指定する by ryokio (@ryokio) on CodePen.

描画状況の保存・復元

context.save() で今の描画状況を保存します。
context.restore() で保存した状況を復元します。

これで矩形のみがrgba(255, 0, 0, 0.1)になりました。
また、

context.save();

  // この時点での描画を保存
  context.save();
  context.fillStyle = '#00FF00';
  context.restore();

context.restore();

のように入れ子も出来ますが、context.save() や context.restore() が抜けると大変なことになりますので、ご注意を。
（今までで context.restore() の記載が抜けてることの方が多かったです）

See the Pen 描画状況の保存・復元 by ryokio (@ryokio) on CodePen.

様々な図形

円弧を描く場合は context.arc() を使えば描けます。
context.beginPath() でパスを使いたい宣言をします。その後に、context.arc() を使って描画します。

See the Pen 円弧を描く by ryokio (@ryokio) on CodePen.

また context.moveTo() でパスの始点を変更することができます。
それを使って、様々な図形を描くことが可能です。

canvas に図形を描く - 開発者ガイド | MDN
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

画像の描画

画像の描画は context.drawImage() で行います。
ですが、画像はまず画像を読み込み終えていることが前提ですので、画像が読み込み終わっているかのチェックが必要になります。

See the Pen 画像の描画 by ryokio (@ryokio) on CodePen.

context.drawImage() は画像以外にも色々指定することができます。

CanvasRenderingContext2D.drawImage() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/drawImage

変形

図形や画像などは変形することが可能です。

拡縮に関しては context.scale()。
移動に関しては context.translate()。
回転に関しては context.rotate()。

複雑な変形を行う場合は context.transform() もしくは context.setTransform() で可能です。
context.transform() は現状のマトリクスからの変形。
context.setTransform() は現状のマトリクスを破棄して変形（上書き）です。
どちらにしても2Dの行列計算が必要です。~~調べれば出てくるとはいえ、私は苦手です……。~~

See the Pen 変形 by ryokio (@ryokio) on CodePen.

合成

直前の描画との合成をする際は、context.globalCompositeOperation を設定します。
私は黒の矩形を画像で抜いて、シルエット画像にする。ということが多いでしょうか。
（これによって、わざわざシルエット画像を用意してもらう必要がなくなる）

See the Pen 合成 by ryokio (@ryokio) on CodePen.

オフスクリーンレンダリング

合成の際に少しやっていますが、新しいcanvas要素を作り、そこにひとまず描画を行い、
その結果を、実際のcanvasに描画して反映させています。
いわゆるオフスクリーンレンダリングです。

専用の OffscreeCanvas というものもあるようですが、当面はこの手法でやるしかないのかなと思っています。

OffscreenCanvas - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

終わりに

アドベントカレンダー初参加だ！
と思いつつも、仕事が忙しい（言い訳）ために、今急いで書いた次第であります。
だが、参加することに意義がある！　……と信じつつ。

根っこのCanvas2Dを触れようとしている方の一助になれば幸いです。
ありがとうございました。