HTML canvas stroke() 方法

HTML Canvas 是一种在网页上绘制图形的方法，它提供了丰富的绘图功能，可以用来创建各种复杂的图形和动画。在 Canvas 中，我们可以使用 stroke() 方法来绘制路径的轮廓。

stroke() 方法的基本用法

在 Canvas 中，我们首先需要创建一个绘图上下文对象，然后使用该对象的方法来绘制图形。stroke() 方法用来绘制路径的轮廓，它会沿着路径的边缘绘制一条线条。

示例代码如下：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 10);
  ctx.stroke();
</script>

在上面的示例中，我们首先获取了一个 Canvas 元素，并获取了其 2D 绘图上下文对象。然后我们使用 beginPath() 方法开始一个新的路径，使用 moveTo() 和 lineTo() 方法定义路径的起点和终点，最后调用 stroke() 方法来绘制路径的轮廓。

strokeStyle 属性

在绘制路径的轮廓时，我们可以通过设置 strokeStyle 属性来指定线条的颜色。strokeStyle 属性可以接受各种颜色值，比如颜色名称、十六进制颜色值、RGB 颜色值等。

示例代码如下：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 10);
  ctx.strokeStyle = 'red';
  ctx.stroke();
</script>

在上面的示例中，我们设置了 strokeStyle 属性为 'red'，这样就会绘制红色的线条。

lineWidth 属性

除了设置线条的颜色，我们还可以通过设置 lineWidth 属性来指定线条的宽度。lineWidth 属性接受一个数字值，表示线条的宽度，单位为像素。

示例代码如下：

// www.javascriptcn.com code example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 10);
  ctx.lineWidth = 5;
  ctx.stroke();
</script>

在上面的示例中，我们设置了 lineWidth 属性为 5，这样就会绘制宽度为 5 像素的线条。

总结

通过本文的介绍，你了解了 HTML Canvas 中 stroke() 方法的基本用法以及如何设置线条的颜色和宽度。希望本文能帮助你更好地使用 Canvas 绘制图形。如果你对 Canvas 还有其他疑问，欢迎继续学习和探索。祝你学习进步！