CANVASの基本
CANVASタグの書式
<canvas id="CANVASを識別するID" width="CANVASの幅(ピクセル)" height="CANVASの高さ(ピクセル)">< / canvas >
CANVAS記述の流れ
① CANVASタグの記述 <canvas id="canvas1" width="300" height="300"></canvas> <script type="text/javascript"> ② CANVASオブジェクトの作成 var canvas1 = document.getElementById("canvas1"); ③ コンテキストの取得 var ctx1 = canvas1.getContext("2d"); ④ 各種プロパティ、メソッドを記述 ctx1.fillStyle = "red"; ctx1.fillRect(0,0,300,300); </script>※同色の名前は同じである必要があります。
CANVAS描画例
CANVASタグの基本的プロパティ・メソッドを利用した描画例です。
sample001では背景画像以外はイメージ画像を使用していません。