javascript - 为 Canvas 元素添加边框

Question

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

我正在使用填充样式和填充来为箭头填充颜色。

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

Answer 1

您必须在 Canvas 的上下文(此处的“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();