JavaScript Canvas fillText 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas fillText 方法。此方法对于在 HTML canvas 元素上绘制文本至关重要。掌握文本渲染是创建丰富的图形界面的关键。
基本定义
Canvas fillText 是一个在 canvas 上绘制填充文本的方法。与勾勒文本的 strokeText 不同，fillText 创建的是实心文本。可以通过字体、颜色和对齐属性来自定义外观。
主要的文本方法是 fillText 和 strokeText。这些方法与 font、textAlign 和 textBaseline 等字体属性配合使用，以控制文本的渲染。
基本的 fillText 用法
此示例演示了如何使用 fillText 在 canvas 上绘制简单文本。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas fillText</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('Hello Canvas', 50, 50);
</script>
</body>
</html>
在这个基本示例中，我们创建一个 canvas 元素并获取其 2D 渲染上下文。我们将字体设置为 30px Arial，填充颜色设置为蓝色。
fillText 方法在位置 (50,50) 绘制文本“Hello Canvas”。这展示了在 canvas 上渲染文本的最简单方法。
带有自定义字体和颜色的文本
此示例展示了如何自定义字体属性和文本颜色。
<!DOCTYPE html>
<html>
<head>
<title>Custom Font Text</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First text with serif font
ctx.font = 'italic bold 36px Georgia';
ctx.fillStyle = 'red';
ctx.fillText('Styled Text', 50, 80);
// Second text with sans-serif font
ctx.font = '20px Verdana';
ctx.fillStyle = 'green';
ctx.fillText('Different Style', 50, 150);
</script>
</body>
</html>
在这里，我们在同一 canvas 上演示了两种不同的文本样式。第一个文本使用 Georgia 字体，具有斜体和粗体样式，大小为 36px。
第二个文本使用 Verdana 字体，大小为 20px，颜色为绿色。这展示了如何在同一 canvas 上渲染具有不同样式的多个文本元素。
文本对齐和基线
此示例演示了文本对齐和基线属性。
<!DOCTYPE html>
<html>
<head>
<title>Text Alignment</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw reference line
ctx.strokeStyle = 'gray';
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(200, 300);
ctx.stroke();
// Center-aligned text
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText('Top Aligned', 200, 50);
// Right-aligned text
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillText('Middle Baseline', 200, 150);
// Left-aligned text
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
ctx.fillText('Bottom Baseline', 200, 250);
</script>
</body>
</html>
此示例显示了 textAlign 和 textBaseline 属性如何影响文本定位。垂直参考线有助于可视化对齐点。
第一个文本是居中对齐，顶部基线。第二个文本是右对齐，中间基线。第三个文本是左对齐，底部基线。
带有阴影效果的文本
此示例展示了如何为 canvas 文本添加阴影效果。
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></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 with shadow
ctx.font = '40px Impact';
ctx.fillStyle = 'red';
ctx.fillText('Shadow Effect', 50, 100);
// Text without shadow
ctx.shadowColor = 'transparent';
ctx.fillStyle = 'blue';
ctx.fillText('No Shadow', 50, 150);
</script>
</body>
</html>
在这里，我们使用阴影属性创建了具有投影效果的文本。shadowColor、shadowBlur 和 shadowOffset 属性控制效果。
第一个文本具有半透明的黑色阴影，带有模糊和偏移。第二个文本演示了如何通过设置透明颜色来禁用阴影。
带有渐变填充的文本
此示例展示了如何使用渐变填充文本而不是纯色。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Text</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
// Apply gradient to text
ctx.font = 'bold 50px Arial';
ctx.fillStyle = gradient;
ctx.fillText('Gradient Text', 20, 100);
</script>
</body>
</html>
此示例创建了一个从红色到黄色再到蓝色的水平渐变。该渐变被用作文本的填充样式。
createLinearGradient 定义了渐变方向。addColorStop 添加了颜色过渡点。然后使用该渐变以粗体 50px Arial 字体填充文本。
来源
在本文中，我们探讨了使用 fillText 在 HTML canvas 上渲染文本的各种技术。掌握这些方法对于在 Web 图形和可视化中创建丰富的文本元素至关重要。
作者
列出 所有 JS Canvas 教程。