CANVASで図形を描画する

トップページプログラミング技術等CANVAS要素(HTML5)(導入)

CANVASで図形を描画するJavaScriptの例を挙げる。
「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください(IE8以前では表示されない)。

CANVASで四角形を描画する

四角形を塗りつぶして描くにはfillRect、枠線のみで描くにはstrokeRectを用いる。
引数は其々、(左上x座標、左上y座標、横幅、縦幅)を指定している。
その前に、fillStyle、strokeStyleで色を指定出来る。ここでは"red"等を代入しているが、"#ffffff"等の表記でもよい。
clearRectは、指定した範囲の四角形を削除し、透明にする。
ここでは乱数を使ってその都度0~2のどれかを取得し、其々の場合に応じて、カーソルの位置に四角形を描画、または削除している。
(乱数は、JavaScriptでは、Math.random()で0~1の範囲の小数のどれかが得られる。これに3を掛けて、Math.floorで小数点以下を切り捨てれば0~2が得られる)
なお、枠線の太い四角を描くには、外側を塗りつぶし、内側に四角を置いて透明にすればよい。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

CANVASで円または円弧を描画する

塗りつぶしや線の色の指定方法は、四角形と同じだが、描画するコードをbeginPath()と、塗りつぶす場合はfill()、線のみの場合はstroke()で囲む。
描画はarcで行うが、引数は(中心x座標、中心y座標、半径、始点角度、終点角度、回り方向)となる。
下図は始点角度45(ラジアン)、終点角度120(ラジアン)の例で、角度はx軸と円弧の右側の交点を0とし、時計回りに測る。

回り方向がfalseならば、始点と終点を時計回りに結ぶ円弧を指し、trueは逆に始点と終点を反時計回りに結ぶ円弧を指す。
円弧の塗りつぶしは、円弧の両端を結ぶ線と円弧で挟まれる領域となる。
なお、円は0度を始点として、360度を終点とすればよい(他の角度を使ってもよい)。
ここでは、乱数により6種類の円または円弧を、カーソルの位置を中心に描くようにしている。
なお、枠線の太い円を描くには、外側に塗りつぶしの円を描き、内側に背景色と同じ円を描けばよい。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

CANVASで描画した図形を半透明にする

この場合も、png画像等を半透明にしたのと同じ、globalAlphaプロパティを使う。設定は画面全体に掛るので、save()、restore()でその都度更新する必要がある。
ここでは、乱数で色を決めた後、乱数で0.1~1.0の10段階の透明度を設定し、塗りつぶしの円を描いている(透明度0.0は何も描かれないので除外)。
(枠内をクリックすると、カーソルを中心にした円を描く)

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

CANVASでの線形グラデーション

線形グラデーションは、色鉛筆を並べたように、色が少しずつ変わる状態を指す。
画面コンテキストに対するcreateLinearGradientで色の変化の範囲をまず指定する。引数は(始点x座標、始点y座標、終点x座標、終点y座標)となる。
始点と終点の二点を指定すると、それが水平の位置関係であれば、縦に色が変わるグラデーション、垂直の位置関係なら横に、斜めなら斜めに変わるグラデーションとなる。
この設定した変数(ここではgrad)に対するaddColorStopプロパティで、色を指定する。第一引数は0が始点、1が終点、0.5なら中間点、0.2なら終点までの距離に対し、始点から20%の距離を指定する。
第二引数でその地点での色を指定する。下記は、それぞれ縦、斜め、横のグラデーションを、其々始点赤、終点紫、中間緑、始点と中間の間を黄色、中間と終点の間を青に設定した例である。
設定した二地点の間は、その二地点の色をなだらかに結ぶ色が自動的に付される。

この例では、画面読み込み時に乱数でグラデーションの方向を決め、上記の場所に対応した色をセットしている。
画面をクリックすると、カーソルを左上にした200px四方の正方形が描かれる(再読み込みするとグラデーションの向きが乱数で変わる。乱数なので同じ場合もある)。
四角を敷き詰めていけば、画面全体のグラデーションが見えて来るようになる。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

CANVASでの円形グラデーション

円形グラデーションは、同心円状に色が変化する。画面コンテキストに対するcreateRadialGradientで指定する。
引数は、(中心円の中心x座標、同y座標、同半径、外側円の中心x座標、同y座標、同半径)となる。
ここで中心円の中は、addColorStopの第一引数が0で指定された色となる。addColorStopの第一引数が1で指定された色は、外側円の外側を塗る色となる。
線形グラデーションと同じように、中間の色を指定出来る。addColorStopの第一引数が小さいほど、中心円に近い所となる。
図では中間色の部分は適当に太さがあるが、実際は線で指定されていると考える。図の白い部分は、挟まれる色を結ぶグラデーションとなる。

外側円の中心を、中心円の中心とずらして設定する事も出来る。しかし、その場合でも外側円は中心円を包むようにしなければならない。
ここでは乱数により、中心を一致させる場合とずらす場合を選択し、中心円を紫、外側円を灰色として、中心から順に青、緑、黄色と等間隔で色を指定している。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

CANVASで直線を引く

これが一番、簡単かもしれない。moveToで始点、lineToで終点の座標を指定し、strokeで描く。
その前に幅をlineWidth、色をstrokeStyleで指定しておく。
ここでは、クリックするたびに、乱数で三種類の直線のどれかを選んで描画する。始点はカーソルの位置となっている。
beignPathは設定をクリア(初期化)する(この行をコメントアウトするとどうなるか、試してみると意味が分かる)。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く