增加画布中形状的边框宽度

Question

我创建了画布，并使用Javascript在画布中创建了一个圆圈。 我使用stroke()给圆加了边框，但是我不确定如何增加边框的宽度。 我以为可以使用strokeWidth() ，但是不确定。

 var c=document.getElementById('canvas'); var ctx=c.getContext('2d'); ctx.beginPath(); ctx.fillStyle="blue"; ctx.arc(150,73,70,0,2*Math.PI); ctx.fill(); ctx.strokeStyle="yellow"; ctx.stroke(); ctx.closePath(); 

 #canvas{ height: 250px; width: 500px; background-color: orange; border: 1px solid black; margin-left: auto; margin-right: auto; left: 0; right: 0; display:block; } 

 <canvas id="canvas" width=500 height=250></canvas> 

Answer 1

您可以使用.lineWidth属性来增加边框的粗细，如下所示：

---

 var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.fillStyle = "blue"; ctx.arc(150, 73, 70, 0, 2 * Math.PI); ctx.fill(); ctx.lineWidth = 10; ctx.strokeStyle = "yellow"; ctx.stroke(); ctx.closePath(); 

 #canvas { height: 250px; width: 500px; background-color: orange; border: 1px solid black; margin-left: auto; margin-right: auto; left: 0; right: 0; display: block; } 

 <canvas id="canvas" width=500 height=250></canvas> 

Answer 2

尝试使用ctx.lineWidth=10; 更多信息可以在这里找到。

Answer 3

您可以使用.lineWidth属性来增加边框的粗细，例如：

ctx.lineWidth = 10;

注意：必须在调用stroke（）之前设置lineWidth属性。