キャンバス作成
ファイル名: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"と組み合わせることが多く、見た目にも変化がわかりやすいため"キャンバス"コースではこのようなキャンバスに図形を描写していきます。