HTML5 の canvas で多角形を描く

多角形を描く

多角形は基本的に点を順番に打っていけばよい。

	ctx.beginPath();
	ctx.moveTo(10, 40);
	ctx.lineTo(50, 60);
	ctx.lineTo(70, 10);
	ctx.closePath();
	ctx.stroke();

四角形を描く

多角形でも、長方形や正方形に限り、始点位置と、幅、高さで描くことができる。

  // 20, 30 はそれぞれ x 座標, y 座標の始点、50 は幅、40 は高さ。
  ctx.strokeRect(20, 30, 50, 40)