JavaScript Canvas lineWidth 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas lineWidth 属性。此属性控制在画布上绘制的线条和形状轮廓的粗细。理解 lineWidth 对于创建精确的图形至关重要。
基本定义
lineWidth 属性以像素为单位指定线条的粗细。它影响所有描边的路径，包括线条、曲线和形状轮廓。默认值为 1.0，创建细线。
线宽是沿着路径坐标居中应用的。宽度为 10 意味着路径的每一侧延伸 5 像素。此属性与 stroke() 和 strokeRect() 等描边方法一起使用。
基本的 lineWidth 示例
此示例演示了如何绘制具有不同粗细的线条。
<!DOCTYPE html>
<html>
<head>
<title>Basic lineWidth</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Thin line
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();
// Medium line
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
// Thick line
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.stroke();
</script>
</body>
</html>
此代码绘制了三条粗细递增的水平线。第一条线使用默认的 1px 宽度，第二条线使用 5px，第三条线使用 15px。
请注意每条线如何在其 y 坐标上居中。粗细在路径坐标的上方和下方均匀延伸。这演示了基本的宽度控制。
形状的 lineWidth
此示例显示了 lineWidth 如何影响不同的形状及其轮廓。
<!DOCTYPE html>
<html>
<head>
<title>lineWidth with Shapes</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Rectangle with thin outline
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.strokeRect(50, 50, 100, 100);
// Rectangle with thick outline
ctx.lineWidth = 10;
ctx.strokeStyle = 'blue';
ctx.strokeRect(200, 50, 100, 100);
// Circle with medium outline
ctx.lineWidth = 5;
ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.arc(300, 200, 50, 0, Math.PI * 2);
ctx.stroke();
</script>
</body>
</html>
这里我们绘制了两个矩形和一个具有不同线宽的圆。第一个矩形具有细细的 1px 红色轮廓，而第二个矩形具有粗粗的 10px 蓝色轮廓。
圆演示了 lineWidth 对曲线路径同样有效。绿色圆的轮廓为中等 5px。请注意描边如何延伸到路径的内外。
lineWidth 和线帽
此示例探讨了 lineWidth 如何与不同的线帽样式交互。
<!DOCTYPE html>
<html>
<head>
<title>lineWidth with Line Caps</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Butt cap (default)
ctx.lineWidth = 15;
ctx.lineCap = 'butt';
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.stroke();
// Round cap
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineTo(300, 100);
ctx.stroke();
// Square cap
ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(350, 100);
ctx.lineTo(450, 100);
ctx.stroke();
</script>
</body>
</html>
此代码演示了具有 15px 粗线的三个线帽样式。butt 帽（默认）在端点处精确结束，而 round 帽则增加了半圆形端点。
square 帽将线在每个端点外延伸 lineWidth 的一半。所有线帽在粗线的情况下都清晰可见，显示了宽度如何影响线端。
路径上的可变 lineWidth
这个高级示例展示了如何创建具有可变线宽的路径。
<!DOCTYPE html>
<html>
<head>
<title>Variable lineWidth</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a path with varying width
ctx.beginPath();
ctx.moveTo(50, 150);
// Draw segments with increasing width
for (let i = 0; i < 10; i++) {
ctx.lineWidth = 1 + i * 2;
ctx.lineTo(50 + i * 40, 150 + Math.sin(i) * 50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50 + i * 40, 150 + Math.sin(i) * 50);
}
</script>
</body>
</html>
这创建了一条波浪形路径，其中每个段的线都逐渐变粗。我们通过将路径分成段并更改 lineWidth 来实现这一点。
每个段从前一个段的末尾开始。宽度以递增的方式从 1px 增加到 19px。此技术允许动态改变线粗细。
lineWidth 和性能
此示例演示了非常大的线宽对性能的影响。
<!DOCTYPE html>
<html>
<head>
<title>lineWidth Performance</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Test performance with large lineWidth
const startTime = performance.now();
ctx.lineWidth = 100;
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.bezierCurveTo(150, 50, 350, 250, 450, 150);
ctx.stroke();
const endTime = performance.now();
console.log(`Rendering took ${endTime - startTime} milliseconds`);
</script>
</body>
</html>
此代码绘制了一条粗贝塞尔曲线并测量了渲染时间。非常大的 lineWidth 值会影响性能，尤其是在处理复杂路径时。
控制台记录渲染持续时间。实际上，除非必要，否则应避免使用极大的宽度，因为它们需要更多的计算才能正确渲染。
来源
在本文中，我们深入探讨了 lineWidth 属性。我们涵盖了基本用法、形状轮廓、线帽、可变宽度和性能考虑因素。
作者
列出 所有 JS Canvas 教程。