javascript - 为画布元素添加边框

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();