Canvasの使い方

Canvas

Canvasについて

JavaScriptでゲームを作るとなると、ほぼほぼ出てくるのがCanvasです。
Web API(Web Application Programming Interface)に組み込まれており、Canvas APIのCanvasを利用します。
HTMLのcanvas要素を使ってグラフィックを描くのに用いられます。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>開発環境</title>
	</head>
	<body>
		<canvas id="canvas" width="300" height="300"></canvas>
		<script type="text/javascript" src="canvas.js"></script>
	</body>
</html>

300 * 300 のcanvas要素を用意してみました。
1枚の紙のようなイメージですね。
これだけだと何も描いていないので、真っ白です。

色を塗ってみる

真っ白なcanvasに色を塗ってみます。
色を塗る、というのは正確ではありません。
正確にはcanvasいっぱいに図形を描くことによって、canvasに色を塗ります。

window.onload = function() {
	// HTML からcanvas要素を取得しています。
	const canvas = document.getElementById('canvas');
	// canvasからcontextを取得しています。
	const context = canvas.getContext('2d');
	// 塗りつぶしの色を設定する
	context.fillStyle = 'rgba(120, 150, 120, 1)';
	// 塗りつぶしの実行
	// (0, 0)からcanvasの横幅と高さで図形を描画する
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = 'rgba(255, 255, 255, 0.4)';
	// (100, 150)から幅100高100の図形を描画する
	context.fillRect(100, 150, 100, 100);
}

ハイライトされている2行は、HTMLからcanvas要素を取得し、取得したcanvasからcontextを取得しています。
canvasに描画をしたい場合、実際にはcanvasが持つcontextを利用して描画することになります。
引数の'2d'は2Dの図形を扱うため、2D用のcontextを返すように指定しています。
3Dを扱いたい場合は引数に'webgl'を指定します。

四角形を描画する場合は
context.fillText(x, y, width, height)
x: 描画開始位置のx座標
y: 描画開始位置のy座標
width:四角形の横幅(-にするとx座標から左に向かって描画される)
height:四角形の高さ (-にするとy座標から上に向かって描画される)

文字を描いてみる

次に文字を描いてみます。

  // 文字の色の指定
  context.fillStyle = 'rgba(250, 250, 250, 1)';
  // canvasの(10, 10)の位置に文字を描画する
  context.fillText('文字の色は' + context.fillStyle, 10, 10);
  // 文字サイズとフォントの指定
  context.font = "24px MS明朝";
  context.fillText('文字サイズを大きくする', 10, 50);
    // canvasに収まりきらない場合は見切れる
  context.strokeText('文字サイズを大きくする', 100, 80);
  context.font = "bold 20px MSゴシック";
  // rgba() は red green bule alpha(透明度を0-1で指定する)
  context.fillStyle = 'rgba(250, 250, 250, 0.5)';
  // 四つ目の引数に最大幅を指定すると自動的に調整してくれる
  context.fillText('↑文字の輪郭のみ　半透明もできる', 10, 110, 290);
  context.fillText('x座標から最大幅300で描画しようとする', 10, 140, 300);

canvas.jsの塗りつぶし処理の下に追記しました。
注意することは特にないかと思います。
一つ不便なことを挙げるとすると、改行記号を利用しても改行できないことです。
なので、テキストのサイズ分下げて描画するしかありません。

テキストを描画する場合は
context.fillText(Sring, x, y, [maxWidth])
String: 描画したい文字列
x: 描画を開始位置のx座標
y: 描画を開始位置のy座標
[maxWidth]: 描画領域の最大幅(省略可能)
※最大幅を省略するとテキストが見切れることがあります。

最後に

最後にクラスにまとめておきたいと思います。

class CanvasClass {
  constructor() {
    this.canvas;
    if(document.getElementById('canvas') === null) {
      this.canvas = document.createElement('canvas');
      this.canvas.width = 300;
      this.canvas.height = 300;
      document.body.append(this.canvas);
    } else {
      this.canvas = document.getElementById('canvas');
    }
    this.context = this.canvas.getContext('2d');
  }

  getCanvas() {
    return this.canvas;
  }

  getContext() {
    return this.context;
  }

  setCanvasSize(w, h) {
    this.canvas.width = w;
    this.canvas.height = h;
  }
}

これだけです。
クラスの章で少しふれましたが、一つのクラスに一つの関心毎にした方が後々便利です。
ただ、プログラミングの世界に正解はありません。
というのも、電車のSuicaやETCなどのように処理をできる限り早くしたい場合もあれば、
後々、他の人がメンテナンス・拡張(改造)しやすい場合があるからです。
もちろん、使わない方がいいメソッドやキーワードもあります。
しかし、こだわればこだわるほど迷子になるので、最終的に動いていれば正義です。
アドバイスは優しい人がしてくれると信じて、いろいろやってみてください。

スポンサーリンク