Hatena::ブログ(Diary)

funxion

2011-08-28

【JS】Canvasを触ってみる。描画編

今まで何回か触ったけどその度に忘却してきたので、今回はちゃんとメモしとく。

javascript:

  var ctx;
  window.onload = function(){
    var canvas = document.getElementById('c');
    ctx = canvas.getContext('2d');
    ctx.fillStyle='#00FF00';  //塗りつぶし色
    ctx.fillRect(0,0,100,100);  //fillRect(x,y,width,height)
  }

HTML:

<canvas id="c" width="400px" height="400px">
</canvas>

実行結果:

f:id:osk8mf:20110829002048p:image

円を描くなら

ctx.beginPath();
ctx.fillStyle='#00FF00'; //描画開始
ctx.arc(20,20,20,0,Math.PI*2,true);  //円の描画
ctx.fill();  //描画終了

実行結果:

f:id:osk8mf:20110829002050p:image

arcの引数は、

arc(中心X座標,中心Y座標,半径,開始点ラジアン,終了点ラジアン,反時計周りならtrue、時計周りならfalse);


パスを線で描くときは

ctx.beginPath(); //描画開始
ctx.strokeStyle='#00FF00'; //線の色
ctx.moveTo(20,20); //開始点
ctx.lineTo(100,100);  line(x,y)に向かって線を引く
ctx.stroke();  

実行結果:

f:id:osk8mf:20110829002049p:image

って感じ。

こっち見た方が分かりやすいけど。

HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ

眠いから今日はここまで。アニメーションは次回。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/osk8mf/20110828/1314546459
リンク元