JavaScript Canvas描边教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨JavaScript中的Canvas描边方法。这些方法对于在HTML canvas上绘制形状和路径的轮廓至关重要。掌握描边对于创建图形和可视化效果至关重要。
基本定义
Canvas描边是指绘制形状或路径轮廓的过程。与填充（填充内部）不同，描边仅绘制边界线。描边样式、宽度和其他属性都可以自定义。
主要的描边方法是stroke、strokeRect和strokeText。它们与路径绘制方法（如lineTo和arc）配合使用，以创建带轮廓的形状。
基本描边用法
此示例演示了如何在canvas上绘制一个简单的描边矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 200, 100);
</script>
</body>
</html>
在这个基本示例中，我们创建一个canvas元素并获取其2D渲染上下文。我们将描边颜色设置为蓝色，并将线宽设置为5像素。
strokeRect方法在位置（50,50）绘制一个宽度为200、高度为100的矩形轮廓。这演示了在canvas上创建描边形状的最简单方法。
带有描边的自定义路径
此示例展示了如何创建自定义路径并对其进行描边。
<!DOCTYPE html>
<html>
<head>
<title>Custom Path Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
在这里，我们使用beginPath、moveTo和lineTo创建了一个自定义三角形路径。closePath将最后一个点连接到第一个点。
定义路径后，我们设置描边属性并调用stroke来绘制轮廓。这展示了如何为复杂的自定义路径描边。
虚线描边
此示例演示了如何使用lineDash属性创建虚线。
<!DOCTYPE html>
<html>
<head>
<title>Dashed Line Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.setLineDash([5, 3]);
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
</script>
</body>
</html>
此示例创建了一条虚线水平线。setLineDash方法接受一个数组，该数组指定了虚线和间隔的长度。
在这里，我们使用[5,3]，表示5像素的虚线和3像素的间隔。这条线从（50,100）绘制到（250,100），颜色为绿色，宽度为2像素。
渐变描边
此示例展示了如何为描边应用渐变。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.stroke();
</script>
</body>
</html>
在这里，我们创建了一个从红色到黄色再到蓝色的线性渐变。此渐变被用作圆形路径的描边样式。
createLinearGradient定义了渐变方向。addColorStop添加了颜色过渡点。然后，使用该渐变来描绘一个线宽为10像素的圆。
具有线段连接的进阶描边
此示例演示了描边的不同线段连接样式。
<!DOCTYPE html>
<html>
<head>
<title>Line Join Styles</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Round join
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(150, 50);
ctx.lineJoin = 'round';
ctx.lineWidth = 15;
ctx.strokeStyle = 'red';
ctx.stroke();
// Bevel join
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 150);
ctx.lineTo(300, 50);
ctx.lineJoin = 'bevel';
ctx.lineWidth = 15;
ctx.strokeStyle = 'blue';
ctx.stroke();
// Miter join (default)
ctx.beginPath();
ctx.moveTo(350, 50);
ctx.lineTo(400, 150);
ctx.lineTo(450, 50);
ctx.lineJoin = 'miter';
ctx.lineWidth = 15;
ctx.strokeStyle = 'green';
ctx.stroke();
</script>
</body>
</html>
此示例显示了三种不同的线段连接样式：圆角、斜角和斜接。每种样式都会影响线条在锐角处相交时拐角的渲染方式。
lineJoin属性控制此行为。圆角样式创建圆形的拐角，斜角样式创建平角的拐角，斜接样式创建尖锐的拐角（默认）。每个路径都演示了一种样式。
来源
在本文中，我们探讨了在HTML canvas上描边路径和形状的各种技术。掌握这些方法对于在Web应用程序中创建详细的图形和可视化效果至关重要。
作者
列出 所有 JS Canvas 教程。