Study HTML5 & JavaScript (3) – Canvas
HTML5の新しい機能、canvas!
canvasタグ内で、いろいろ描画できるというやつです。
processingを思い出します。
canvasではないけれど、
そういえば、昨年教えてもらったJavaScriptのみで描かれたサイト。
http://www.cake23.de/traveling-wavefronts-lit-up.html
(Google Chromeでしか見れません)
綺麗すぎて悶絶するけど、ソースを見ると鬼！！！
コードだけでこんなにも有機的な表現ができるなんて、感動です。
以下、学習内容です。
—
・キャンバスの制作
<canvas id=”ID” width=”幅” height=”高さ”></canvas>
グラフィックスを描画する領域
指定したサイズ(幅×高さ)の透明なキャンバスがページ内に作成される
var canvas(変数) = document.getElementById(“main(ID)”);
var context(変数) = canvas.getContext(“2d”);
キャンバスの取得、コンテクストの取得
キャンバスを使用する際に必ず記述するコード（決まり文句として覚える）
・四角形の描画
コンテキスト.strokeStyle
線の色の設定
コンテキスト.strokeRect(x,y,w,h)
四角形(輪郭のみ)の描画
x： 四角形の左上の頂点のx座標
y：四角形の左上の頂点のy座標
w：四角形の幅
h： 四角形の高さ
コンテキスト.fillStyle
塗りつぶし色の設定
コンテキスト.fillRect(x,y,w,h)
四角形(塗りつぶし)の描画
・線の描画
コンテキスト.beginPath()
パスの開始
コンテキスト.moveTo(x,y)
始点の移動
コンテキスト.lineTo(x,y)
線の作成（指定の座標まで線を引く）
コンテキスト.closePath()
パスを閉じる
コンテキスト.stroke()
パスの描画
・円、弧の描画
コンテキスト.arc(x,y,radius,startAngle, endAngle, anticlockwise)
円・弧の作成
x：円の中心のx座標
y：円の中心のy座標
radius：円の半径
startAngle：開始角度（ラジアンで指定）
endAngle：終了角度（ラジアンで指定）
anticlockwise：描画方向（反時計回りはtrue、時計回りはfalseを指定）
JavaScriptでは π (ラジアン) = Math.Pl と記述
ex.) 360°=2π = 2*Math.Pl / 45° = 2*Math.Pl*(45/360)
コンテキスト.fill()
パスで囲まれた領域を塗りつぶす
塗りつぶしの色は、fillStyleで指定した色になる
・曲線の描画
quadraticCurveTo(cp1x, cp1y,x,y)
2次ベジェ曲線を描画
bezierCurveTo(cp1x, cp1y,cp2x,cp2y, x,y)
3次ベジェ曲線を描画
arcTo(x1,y1,x2,y2,radius)
直線に接する弧を描画
