Study HTML5 & JavaScript (3) – Canvas

JavaScript+HTML5 Study Book

HTML5の新しい機能、canvas!

canvasタグ内で、いろいろ描画できるというやつです。

processingを思い出します。

 

canvasではないけれど、

そういえば、昨年教えてもらったJavaScriptのみで描かれたサイト。

WebGLShaderLab

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)

直線に接する弧を描画