Canvasを使って描画した図形にグラデーションを適用する

Categories : HTML5, Web

図形に円形のグラデーションと透明度を設定する
createLinearGradient(x1,y1,x2,y2)：線形グラデーション。
引数は、グラデーションの始点(x1,y1) と終点(x2,y2) を表す
createRadialGradient(x1,y1,r1,x2,y2,r2)：円形グラデーション。
引数の最初の3つは座標(x1,y1) 半径 r1 の開始円を定義し、2つめは座標(x2,y2) 半径 r2 の終了円を定義する

addColorStop(position, color)：色を割り当てる。position は 0.0 から 1.0 の間の数値でなければならず、グラデーションの色の相対位置を定義する。
※例えばこれを 0.5 に設定すると色は正確にグラデーションの中心に置かれる。color 引数は CSS 色を表す文字列でなければならない(つまり #FFF、 rgba(0,0,0,1)、等)。

fillStyle：塗りつぶし形状向けに使われる現在のスタイル。
fillRect( x, y, w, h )：canvas 上の指定の矩形を、現在の塗りつぶしスタイルを使って塗りつぶす。
矩形の左上端の x 座標と y 座標。次の 2 つは、矩形の幅 w と 高さ h 。

【参照サイト】
・Mozilla Developer Network
・HTML5.jp

Canvasでいろいろな図形を描く

Categories : HTML5, Web

HTML5 Canvasを使い様々な図形を描く

矩形を描く
fillRect(x,y,width,height) : 塗られた矩形を描く
strokeRect(x,y,width,height) : 矩形の輪郭を描く
clearRect(x,y,width,height) : 指定された領域を消去し、完全な透明にする
※ x と y は 矩形の左上の角の canvas 上での位置(原点から相対的)を指定する。 width と height はそれぞれ矩形の幅と高さ。

パスを使って図形を描く

● 三角形を描く
beginPath() : パスの描画開始
moveTo(x, y) : 新しい始点の座標
closePath() : 現在の点から始点に向けて直線を描くことで図形を閉じる。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしない
stroke() : 輪郭の描かれた図形を描く
fill() : 単色の図形を描く（※fill メソッドがと呼ばれるときは、開いている図形は自動的に閉じられるため、 closePath メソッドを使う必要はない ）

● 星を描く

円を描く
arc(x, y, radius, startAngle, endAngle, anticlockwise) : x と y は円の中心。Radius は円の半径。startAngle と endAngle パラメタは円弧の始まりと終点を定義。始まりと終わりの角度は x 軸から計算する。
anticlockwise パラメータは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値。

● ピースマーク（円の応用）

ベジェ曲線を使って図形を描く

● ハートマーク
quadraticCurveTo(cp1x, cp1y, x, y) : 二次ベジェ曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) : 三次ベジェ曲線
x と y パラメタは終点の座標。cp1x と cp1y は最初の制御点、 cp2x と cp2y は二番目の制御点の座標

【参照サイト】
・Mozilla Developer Network
・HTML5 Canvas Tutorials