我正在 Canvas 上绘制一些箭头(类似的箭头可以在生命周期中查看)。我想单独为所有这些箭头绘制边框,就像我们添加到 div 一样。我尝试使用描边样式和描边方法,但它填满了我的整个箭头。
我正在使用填充样式和填充来为箭头填充颜色。
有什么办法吗?填充和描边方法永远不能一起使用吗?
最佳答案
您必须在 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();
关于javascript - 为 Canvas 元素添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13452995/