【html5】canvasしたい（最初の一歩）

Tweet

Category html5, JavaScript / Tagged canvas 2012/10/03

問題

canvas したいです！

答え

とりあえず、素のJavaScriptだと以下のように書けばよい。

HTML

<canvas id="canvas" width="320" height="240"></canvas>

JavaScript

<script>
$(function(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    //色（赤）
    ctx.fillStyle = 'rgb(204, 0, 0)';
    //■四角描く
    ctx.fillRect(25,25,100,100);
    //□四角消す
    ctx.clearRect(45,45,60,60);
    //色（青）
    ctx.fillStyle = 'rgb(0, 0, 204)';
    //□四角描く
    ctx.strokeRect(50,50,50,50);
    //色（緑）
    ctx.strokeStyle = 'rgb(0, 204, 0)';
    //○丸描く
    ctx.beginPath();
    ctx.arc(75,75,25,0,Math.PI*2,true);
    ctx.stroke();
  }
});
</script>

DEMO

なんだか面倒そうだけど、そういう仕組みなのね　というのが分かったところで、

楽をするためには出来合いのライブラリのお世話になるとよいでしょう。

EaselJS など有名でおすすめ。

図形を配置するだけでなく、マウスでお絵かきなどにも対応できる。

参考

EaselJS | A Javascript library that makes working with the HTML5 Canvas element easy.:

KineticJS HTML5 Canvas Framework

http://paperjs.org/