FC2ブログ

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();
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック