SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【html5】canvasしたい(最初の一歩)

問題

canvas したいです!

canvas-html5

答え

とりあえず、素の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/

関連するメモ

コメント