如何正確地在HTML5畫布中創建帶邊框的線條

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

我通過這個回答描述了如何從畫布中刪除： jsfiddle here 。

如何正確地在HTML5畫布中創建帶邊框的線條

問題描述

1 個解決方案

解決方案1
2 已采納 2014-01-01 23:45:17

如何正確地在HTML5畫布中創建帶邊框的線條

問題描述

1 個解決方案

解決方案1 2 已采納 2014-01-01 23:45:17

解決方案1
2 已采納 2014-01-01 23:45:17