隅歩つ

書いて理解を深める

Canvasの「Hello World」

Javascriptを理解したいのですが、Webページを作ったりするだけなのは大変なので、Canvasで見た目を楽しみながら勉強したいと思ってます。

まずは、公式ページにあるCanvasの基本を理解したいと思います。

developer.mozilla.org

色付きの四角をつくる

公式ページの一番最初にある例をやってみました。

まずは、HTMLにcanvas用の準備をします。

1.canvasタグにidを設定する。
2.scriptのファイルをリンクさせる。

<canvas id="canvas"></canvas>
<script src="canvas.js"></script>

scriptファイルはcanvasタグよりも下に設定します。
scriptファイルには、canvasタグのidを取ってくるコードがあるので、先にcanvasタグを読み込んでないとscriptが機能しない。
しかし、Javascript側にonload = function () {}などの処理をすれば問題ないです。

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

1行目のgetElementByIdでcanvasタグのidを取得して、変数canvasに入れる。

2行目でcanvasを使えるようにする(よくわかりません)。

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);

そして、fillStyleで色を設定し、fillRectで長方形を設定すると完成です。

canvasで長方形を作成