JavaScript Canvas strokeText教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨JavaScript中的Canvas strokeText方法。此方法对于在HTML画布上绘制带轮廓的文本至关重要。掌握文本描边对于创建视觉上吸引人的文本效果至关重要。
基本定义
Canvas strokeText指的是绘制文本字符的轮廓而不填充它们。与创建实心文本的fillText不同，strokeText仅绘制字符边界。描边样式和宽度都可以自定义。
strokeText方法接受参数：文本字符串，x和y坐标。可选的maxWidth参数可以限制文本宽度。它与font、strokeStyle和lineWidth属性配合使用以进行自定义。
基本的strokeText用法
此示例演示了如何在画布上绘制简单的描边文本。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas strokeText</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px Arial';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.strokeText('Hello World', 50, 100);
</script>
</body>
</html>
在这个基本示例中，我们创建了一个canvas元素并获取其2D上下文。我们将字体设置为48px Arial，描边颜色设置为蓝色，宽度为2px。
strokeText方法在位置（50,100）绘制“Hello World”。这演示了在画布上创建描边文本的最简单方法。
粗描边文本
此示例展示了如何创建具有更粗轮廓的文本。
<!DOCTYPE html>
<html>
<head>
<title>Thick Stroked Text</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 60px Impact';
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.strokeText('Canvas Text', 30, 120);
</script>
</body>
</html>
这里我们使用60px大小的粗体Impact字体。描边设置为红色，宽度为5px，创建了醒目的轮廓效果。
更粗的线宽使文本更易于查看，并使其外观更粗。此技术对于标题和题名很有用。
strokeText和fillText结合使用
此示例演示了同时使用描边和填充进行文本效果。
<!DOCTYPE html>
<html>
<head>
<title>Combined Stroke and Fill</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = 'italic 72px Georgia';
ctx.fillStyle = 'yellow';
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.fillText('Dual Effect', 40, 120);
ctx.strokeText('Dual Effect', 40, 120);
</script>
</body>
</html>
这创建了同时具有填充和描边的文本。我们首先用黄色填充，然后用黑色描边，从而创建了带边框的文本效果。
顺序很重要 - 先填充后描边可确保轮廓在边缘周围可见。这是在繁忙的背景上创建可读文本的常用技术。
渐变描边文本
此示例展示了如何将渐变应用于描边文本。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Stroked Text</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(1, 'blue');
ctx.font = 'bold 64px Arial';
ctx.strokeStyle = gradient;
ctx.lineWidth = 4;
ctx.strokeText('Rainbow Text', 30, 120);
</script>
</body>
</html>
这里我们创建了一个从红色到紫色再到蓝色的水平渐变。该渐变被用作文本的描边样式。
createLinearGradient定义了与画布宽度相匹配的渐变方向。渐变描边创建了彩色的文本轮廓效果。
具有阴影的高级文本效果
此示例将strokeText与阴影效果结合使用以增加深度。
<!DOCTYPE html>
<html>
<head>
<title>Stroked Text with Shadow</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="250"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Shadow settings
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
// Text settings
ctx.font = 'bold 72px Arial';
ctx.strokeStyle = 'white';
ctx.lineWidth = 3;
// Draw text
ctx.strokeText('Shadow Effect', 40, 150);
// Reset shadow
ctx.shadowColor = 'transparent';
// Add inner glow with fill
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillText('Shadow Effect', 40, 150);
</script>
</body>
</html>
此示例创建了带有阴影和内部发光效果的描边文本。我们首先设置阴影属性，然后绘制描边文本。
重置阴影后，我们添加半透明填充以创建内部发光效果。这种组合产生了复杂的3D状文本。
来源
在本文中，我们探讨了在HTML画布上描边文本的各种技术。掌握这些方法对于在Web应用程序中创建专业的文本效果至关重要。
作者
列出 所有 JS Canvas 教程。