在 HTML Canvas 中，我们经常会使用 stroke() 方法来绘制线条。stroke() 方法用于给图形描边，通过指定线条的样式、颜色以及宽度来实现不同的效果。在本文中，我将详细介绍 stroke() 方法的使用以及一些常见的示例代码。
语法
stroke() 方法的语法如下：
context.stroke();
其中，context 是一个 CanvasRenderingContext2D 对象，它表示了绘图区域的上下文。
参数
stroke() 方法不接受任何参数，它会使用之前设置的线条样式、颜色和宽度来进行绘制。
示例
下面是一个简单的示例，展示了如何使用 stroke() 方法绘制一条直线：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();在这个示例中，我们首先获取了一个 Canvas 元素和它的上下文对象 ctx，然后使用 beginPath() 方法开始绘制路径，moveTo() 方法设置起始点，lineTo() 方法设置终点，最后调用 stroke() 方法描绘线条。
线条样式
在绘制线条之前，我们可以通过设置一些属性来改变线条的样式。下面是一些常见的属性：
ctx.strokeStyle：设置线条的颜色，可以是 CSS 颜色值或者渐变对象。ctx.lineWidth：设置线条的宽度。ctx.lineCap：设置线条的端点样式，可以是butt（默认）、round或square。ctx.lineJoin：设置线条的连接样式，可以是round、bevel或miter。ctx.miterLimit：设置斜接面限制比例。
示例
下面是一个示例，展示了如何设置线条的颜色、宽度和样式：
// www.javascriptcn.com code example
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.lineJoin = 'bevel';
ctx.miterLimit = 2;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();在这个示例中，我们先设置了线条的颜色为红色，宽度为5个像素，端点样式为圆形，连接样式为斜角，斜接面限制比例为2。
总结
通过本文的介绍，你应该对 HTML Canvas 中的 stroke() 方法有了更深入的了解。你可以根据自己的需求来设置线条的样式，从而实现不同的效果。希望本文能够帮助你更好地使用 stroke() 方法进行绘图。