添加边框到画布元素

Question

我在画布上绘制一些箭头（可以在生命周期中查看类似的箭头）。我想单独绘制所有这些箭头的边框，就像我们添加到div一样。我尝试使用笔触样式和笔触方法，但它填满了我的整个箭头。

我正在使用填充样式并填充以填充我的箭头颜色。

有什么办法吗？是不是像填充和描边方法永远不能一起使用？

Answer 1

你必须在画布的上下文中使用beginPath（）和closePath（）（此处为“ctx”），然后使用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();