javascript - キャンバス要素に境界線を追加する

Question

キャンバスにいくつかの矢印を描いています（同様の矢印はライフサイクルで表示できます）。divに追加するのと同じように、これらすべての矢印に個別に境界線を描画したいと思います。ストロークスタイルとストロークメソッドを使用してみましたが、矢印全体が塗りつぶされました。

塗りつぶしスタイルと塗りつぶしを使用して、矢印の色を塗りつぶしています。

それを行う方法はありますか？塗りつぶしとストロークの方法を一緒に使用することはできないようなものですか？

Answer 1

キャンバスのコンテキスト（ここでは「ctx」）でbeginPath（）とclosePath（）を使用し、その後にfill（）を使用して実際に要素を塗りつぶす必要があります。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(170, 80);
ctx.lineTo(300,150);
ctx.lineTo(100,150);
ctx.lineTo(170, 80);
// Etc, Make your movements to draw the arrow, here.
ctx.closePath();

//Line settings and drawing
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();

//Fill settings and drawing
ctx.fillStyle = '#8ED6FF';
ctx.fill();