四角形をかいてみる
adminファイル名：js-canvas/quest_00041.html
下のソースコードをうつして、キャンバスに図のような四角形をかいてみましょう。
ソースコード
<style>canvas { border: solid 1px #ccc }</style>
<canvas id="my_canvas" width="320" height="320"></canvas>
<script>//※4
const canvas = document.getElementById("my_canvas");//※1
const context = canvas.getContext("2d");//※2
context.fillRect(20, 40, 50, 100);//※3
</script>//※4解説
※1:キャンバスの取得
const canvas = document.getElementById("my_canvas");ここでは、今からどのIDのキャンバスに命令するのかを準備しています。 キャンバスを作成した際、"id="と記載していますが、その先の"my_canvas"部分がキャンバスのIDになります。
※2:コンテキストの取得
const context = canvas.getContext("2d");この行では図形を描写するための準備をして、"context"にしまっています。(だいぶ先の内容になりますが"オブジェクト"というものを宣言しています) 以上2行はこれから図形を描写するごとに必要となります。お手本のソースに書いてない場合でも必要だと思ったら記述してください。
※3:四角を描くfillRect
context.fillRect(20, 40, 50, 100);ここでは先ほど準備した"context"の中から"fillRect"という命令(難しい言葉では"メソッド"と呼びます) を呼び出し、実行しています。 "fillRect"は長方形を描くための命令になります。"fill"は塗りつぶす、"rect"は長方形という意味になります。単語と単語の分かれ目は大文字にします。 このようにプログラムでは英語の意味を知っているとより覚えやすいのでぜひ覚えていきましょう。 また、命令の後にある"(20, 40, 50, 100)"の部分は命令に必要な情報になります。(引数と呼びます) 今回の場合、最初の2つが長方形を描く位置座標で後半2つが大きさを決めています。それぞれの数字を大きくしたり小さくしたりしてどのように変化するか試してみましょう。 同じプログラムを実行する場合は一度プログラムを保存して、ブラウザの更新(キーボードの"f5"キー)を行うことでスムーズに行うことができます。
注釈
※4:JavaScriptの範囲
"html"では
<script>と
</script>で、囲まれた部分を"JavaScript"と認識します。 忘れず記述するようにしましょう。