[canvas]HTML5+canvasの基本の「き」

色々すっ飛ばしてwebGLやThree.jsなどを使っていましたが、基礎を押さえていないことに限界を感じたので、基本に立ち返ります。まずは１からHTML5+canvasを勉強し直し。何もわかっていない私が徐々に使えるようになっていく様を追っていってください。

まずはエリアを指定して要素を配置。それを動かすというベタな実装から

<canvas id="canvas" width="900" height="300"></canvas>

#canvas{ background:#ced7df; }

var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

var count = 0;//アニメーションカウンター
var timer = setInterval(function(){
  ctx.fillStyle="#fff";//消去時の色
  ctx.clearRect(0,0,300,300);//消す
  ctx.fillStyle="#fdbd10";//塗りつぶし色を赤に
  ctx.fillRect(20+count,20+count,20,20);
  count++;
  if(count>200){ //カウントの上限
    clearInterval(timer);
  }
},10);//アニメーションの時間

canvasで指定されたアスペクト比は、CSSの指示に準じて等比で縮尺が行われること、can.getContext("2d");で定義された要素を様々な指示で変化させることがわかりました。