JavaScript»キャンバス キャンバス作成

ファイル名: js-canvas/quest_00040.html

下のソースコードをうつして、図のようなキャンバス(中に何もかかれていないワクのこと)を作ってください。
プログラムを書き終わったら保存し、作成したファイルをダブルクリックして実行してみましょう。
今回の場合、ブラウザが立ち上がり、黒い枠線が表示されていれば成功です。

ソースコード

<style>canvas { border: solid 1px #ccc }</style>
<canvas id="my_canvas" width="320" height="320"></canvas>

解説

<canvas></canvas>でキャンバスを作ります。widthは横の大きさ、heightは縦の大きさをあらわします。数字を変えるとキャンバスの大きさも変わります。
また、今回記述したプログラムは”html”と呼ばれる言語になります。”JavaScript”はこの”html”と組み合わせることが多く、見た目にも変化がわかりやすいため”キャンバス”コースではこのようなキャンバスに図形を描写していきます。