[jQuery] jCanvasで三角形を描く(drawVector())

JqueryjCanvas

ここから少し難しくなります。

正三角形はdrawPoligon()で簡単に描けますが、二等辺三角形やその他の三角形はを描くメソッドはありません。

その場合は、drawVector()を利用します。

2辺の長さと底角が分かっていれば可能です。

drawVector()で線を描く

drawVector()は線を描くメソッドです。まずは単純な直線から

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  a1: 135, l1: 100,
  x:100,y:100
});

これで長さ100ピクセル、始点から135度の角度に伸びる直線が描けました。

このようになります。

x,yに100を指定しいますので、キャンバスの左上から下に100、右に100が始点になります。

a1には角度、l1には長さを指定します。

その他のオプションについては以下の記事を参照して下さい。

[jQuery] JCanvasで四角形を描く (drawRect())

[jQuery] JCanvasで正多角形を描く (drawPolygon())

[jQuery] JCanvasで円を描く (drawArc(),drawEllipse())

直線をつなげて描く

a2,l2を指定することで、最初の直線の終点からさらに線を描きます。

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 50, y: 150,
  a1: 45, l1: 100,
  a2: 135, l2: 220
});

このような線が描けます。

x:50,y:50の地点から開始、1本目は45度、100ピクセルの線になります。

2本目は1本目の終点から135度、220ピクセルの線が描けました。

ここまで描ければ、あと少しで三角形が描けます。

closedオプションで閉じる

jCanvasには非常に便利なオプションがあります。

以下のようにclosedtrueを指定することで両端を結んだ直線を描き三角形を作ってくれます。

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  closed: true,
  x: 50, y: 150,
  a1: 45, l1: 100,
  a2: 135, l2: 220
});

このように三角形が描けました。

fillStyleを指定することで三角形を塗りつぶせます。

2等辺三角形を描く

それでは2等辺三角形を描いてみましょう。

条件は以下になります。

  • 2辺の等しい辺の長さ:100
  • 底角:65度

まず、1本目の直線は65度に長さ100ピクセルとなります。

2本目はそこから100ピクセルの長さの線となります。

が、角度はどうしましょう?

二等辺三角形の底角は2つとも同じ角度になります。よって、180-65+65=50 となり、次は1本目の直線の終端から50度下側に向かう線になります。

しかし、ここでl2に50度を指定しても思ったようにはなりません。最初の65度+50度で115度にします。

ここまででこのような感じになります。

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 100, y: 100,
  a1: 65, l1: 100,
  a2: 115, l2: 100
});

あとは線を閉じて塗りつぶせば出来上がり。

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  fillStyle: '#000',
  closed: true,
  x: 100, y: 100,
  a1: 65, l1: 100,
  a2: 115, l2: 100
});

なんとなく、面倒な印象がありましたが、理解してしまえばものすごくシンプルです。

JqueryjCanvas