ホーム
▶ HTML5 CANVAS & CSS3 Tips
▶ HTML CSS覚え書き:CANVASの基本
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では背景画像以外はイメージ画像を使用していません。