Canvasを使った図形描画や座標系に関する2つの知識。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. Canvasで図形描画。

2. Canvasの座標系。

Canvasで図形描画。

Canvas と言えば「図形描画」が特徴ですので、簡単な四角形を試しに描画してみましょう。
dinoGame.js から console.log('こんにちは'); は削除し、 下記のように書いてみます。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(30, 20, 150, 100);
dinoGame.jsPlease Type!
少し独特な書き方に感じるかもしれません。
各行を解説していくと、

const canvas = document.getElementById('canvas');
は、HTML の ID属性に canvas が設定されているタグを取得しています。


const ctx = canvas.getContext('2d');
では、2D 描画用のオブジェクト(コンテキスト：context と呼ばれている)を呼び出しています。

ctx.fillStyle = 'red';
では、塗り潰しの色を赤色に設定しています。

ctx.fillRect(30, 20, 150, 100);
では、四角形を描画しています。色は先ほど指定した赤色になります。
引数は左から、x座標、y座標、横幅、縦幅、です。
書けたら保存し、ブラウザで HTML をリロードしてみましょう。
赤い長方形を描く事ができていたら成功です。

Canvas の座標系

anvas の座標系は左上を原点とし、 右方向に X軸、 下方向に Y軸となっています。
Canvas での x,y座標 の指定は、描画したい図形の左上の座標を指定します。
「文字などは左下の座標を指定したりなど一部例外はあります。」

まとめ

今回はCanvasの座標や図形描画について解説していきました。
これらはCanvasを通してゲームを作る上でとても大切なことだと感じたのでしっかり覚えていきたいです。それに加え、今回の記事では書けませんでしたが画像を表示させるためにGitHubなどを活用するためGitHubなどもまた復習が大切になってくるなと考えました。