HTML5新要素 canvasの勉強

CSS3から一旦離れてHTML5のお勉強。
HTML5といえばcanvas！

canvas要素とは

canvas要素はスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しい HTML 要素です。

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

canvas sample1 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードはcanvasとJSを使って矩形を描画するというもの。

　canvas id="sample" width="400" height="300"

で、幅400px、高さ300pxのsampleって名前のついたステージがあります。そこにJSで図形を描画しましょうってイメージ。

　ctx.fillRect(50,50,300,200); // 塗られた矩形を描く
　ctx.clearRect(120,80,200,140);　//　指定された領域を消去し、完全な透明にする
　ctx.strokeRect(200,20,180,260);　//　矩形の輪郭を描く

canvas sample2 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードは矩形じゃなくて、パスを書くもの。パスを繋げて三角形とかを書ける。

　ctx.beginPath(); // パスの開始
　ctx.moveTo(50,50); // パスの始点を移動する
　ctx.lineTo(360,200); // 現在の始点の座標から、座標(x, y)に向けて直線を描く
　ctx.closePath(); // パスを閉じる(始点に向けて直線を描くことで図形を閉じる)
　ctx.stroke();　// stroke();で輪郭線
　ctx.fill(); // fill();で塗り潰し

canvas sample3 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードは丸を書くもの。arc メソッドを使う。

　arc(x, y, radius, startAngle, endAngle, anticlockwise)

引数は5つ。
・x と y は円の中心
・Radius は半径
・startAngle と endAngle パラメタは円弧の始まりと終点をラジアン角で定義します
・anticlockwise パラメタは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描く

canvas sample4 - jsdo.it - share JavaScript, HTML5 and CSS

色のつけ方。

　ctx.globalAlpha = 0.5;　//←透明度
　ctx.fillStyle = '#3399ff'; //←塗りの色
　ctx.strokeStyle = '#ff9933'; //←線の色

とりあえず今日はこんなとこで。
canvasはいろいろできそうな感じで興味深く、奥が深い！＞＜

参考サイト：HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ | yoppa.org