HTML5 Canvasを使い様々な図形を描く
矩形を描く
fillRect(x,y,width,height) : 塗られた矩形を描く
strokeRect(x,y,width,height) : 矩形の輪郭を描く
clearRect(x,y,width,height) : 指定された領域を消去し、完全な透明にする
※ x と y は 矩形の左上の角の canvas 上での位置(原点から相対的)を指定する。 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 メソッドを使う必要はない ）
moveTo(x, y) : 新しい始点の座標
closePath() : 現在の点から始点に向けて直線を描くことで図形を閉じる。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしない
stroke() : 輪郭の描かれた図形を描く
fill() : 単色の図形を描く（※fill メソッドがと呼ばれるときは、開いている図形は自動的に閉じられるため、 closePath メソッドを使う必要はない ）
● 星を描く
円を描く
arc(x, y, radius, startAngle, endAngle, anticlockwise) : x と y は円の中心。Radius は円の半径。startAngle と endAngle パラメタは円弧の始まりと終点を定義。始まりと終わりの角度は x 軸から計算する。
anticlockwise パラメータは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値。
anticlockwise パラメータは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値。
● ピースマーク（円の応用）
ベジェ曲線を使って図形を描く
● ハートマーク
quadraticCurveTo(cp1x, cp1y, x, y) : 二次ベジェ曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) : 三次ベジェ曲線
x と y パラメタは終点の座標。cp1x と cp1y は最初の制御点、 cp2x と cp2y は二番目の制御点の座標
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) : 三次ベジェ曲線
x と y パラメタは終点の座標。cp1x と cp1y は最初の制御点、 cp2x と cp2y は二番目の制御点の座標
