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;可以找到更多信息here。

Answer 3

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

ctx.lineWidth = 10;

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

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

3 个答案: