Question

我想在html中绘制带边框的线条，在地图中渲染街道，但我找不到任何标准方法来做到这一点，所以我资源绘制两条叠加线，第一条线比第二。第一次尝试实际上运作良好：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

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

ctx.strokeStyle = "black";
ctx.lineWidth = 20;

ctx.moveTo(100,100);
ctx.lineTo(100,900);
ctx.lineTo(900,900);
ctx.stroke();

ctx.strokeStyle = "yellow";
ctx.lineWidth = 16;

ctx.moveTo(100,100);
ctx.lineTo(100,900);
ctx.lineTo(900,900);
ctx.stroke();

</script> 

</body>
</html>

问题是我必须在一个步骤中绘制整个路径，然后在另一个步骤中绘制第二个路径。由于这个想法是在增长时增加路径的长度，所以不需要这样做（我必须重新绘制所有内容，只是为了在路径中添加一个额外的点）。除此之外，第一行和第二行的代码完全重复。

我找到的解决方案是并行绘制两条线。该元素的代码如下：

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

ctx1.strokeStyle = "black";
ctx1.lineWidth = 20;

ctx2.strokeStyle = "yellow";
ctx2.lineWidth = 16;

ctx1.moveTo(100,100);
ctx2.moveTo(100,100);

/* Those two lines can be wrapped in a single function to reduce redundancy of code */
ctx1.lineTo(100,900);
ctx2.lineTo(100,900);

ctx1.lineTo(900,900);
ctx2.lineTo(900,900);

ctx1.stroke();
ctx2.stroke();

但它没有按预期工作。显然，这是因为我不能为同一个元素设置两个不同的上下文。

任何人都可以更好地了解如何在html5中创建带边框的线？

Answer 1

您不必两次画线。恢复为您的第一个解决方案，只需更改所需的属性 - ctx.lineWidth = 16和ctx.strokeStyle = "yellow" - 然后再次更改ctx.stroke()。

我通过this answer发现了这一点，它描述了如何从画布中删除：jsfiddle here。

如何正确地在HTML5画布中创建带边框的线条

1 个答案: