Canvasで多角形の描画

canvasで多角形の描画
多角形を描画するには
はじめに多角形の頂点を結んだパスを描画
つまり、点を作る
これは、moveTo()で作成する
次に、線を引く
これは、lineTo()
これで、多角形の頂点の座標をつなげていく
その後、fill()で、
多角形の中身を塗りつぶして
描画完成
以下は三角形描画のソース
まぁJavascriptだけだけど
//コンテキスト取得
var canvas=document.getElementById(“a_canvas”);
var context=canvas.getContext(“2d”);
//パスを設定
context.beginPath();
書き始めの座標まで移動
context.moveTo(150,0);
順番に線を引く
context.lineTo(300,300);
context.lineTo(0,300);
context.lineTo(150,0);
context.closePath();
三角形の中を塗りつぶし
context.fillStyle=”#ff0000″;
context.fill();

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です