Javascriptを理解したいのですが、Webページを作ったりするだけなのは大変なので、Canvasで見た目を楽しみながら勉強したいと思ってます。
まずは、公式ページにあるCanvasの基本を理解したいと思います。
色付きの四角をつくる
公式ページの一番最初にある例をやってみました。
まずは、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で長方形を設定すると完成です。