canvas如何绘制文本-html教程-PHP中文网

答案：在Canvas上绘制文本需获取2D上下文，设置字体、颜色、对齐方式和基线后，调用fillText()或strokeText()方法绘制；为确保跨设备一致性，应处理设备像素比、字体加载和Canvas尺寸管理；换行需借助measureText()手动计算，溢出可加省略号；复杂效果如阴影、渐变可通过shadow属性和createLinearGradient实现，结合fillText与strokeText可增强视觉表现。

canvas如何绘制文本

要在Canvas上绘制文本，核心就是利用2D渲染上下文（context）的

fillText()

登录后复制

或

strokeText()

登录后复制

方法。你需要先设置好字体、颜色和对齐方式，然后告诉Canvas在哪里画就行了。听起来简单，实际操作起来也确实不复杂，但有些细节值得琢磨，比如怎么让它看起来更自然，或者处理一些复杂布局。

解决方案

具体怎么操作呢？我们来一步步看。首先，你需要获取到Canvas元素的2D渲染上下文。这是所有绘图操作的入口。接着，设置好你想要的字体样式、颜色、以及文本的对齐方式和基线。最后，调用

fillText()

登录后复制

或

strokeText()

登录后复制

来真正地把文本画到画布上。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 清空画布，以便每次重绘时看到最新效果
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 1. 设置字体样式
// 格式通常是 "font-weight font-size font-family"
ctx.font = '48px Arial'; 
// 我个人比较喜欢用像素作为单位，因为它在Canvas上最直接。
// 但要注意，这里是CSS的font属性，所以你可以用所有CSS支持的字体值。

// 2. 设置填充颜色 (用于fillText)
ctx.fillStyle = '#333'; // 深灰色

// 3. 设置文本对齐方式
// 'start', 'end', 'left', 'right', 'center'
// 我发现'center'在很多场景下非常实用，可以把文本精准定位到某个中心点。
ctx.textAlign = 'center';

// 4. 设置文本基线
// 'alphabetic' (默认), 'top', 'hanging', 'middle', 'ideographic', 'bottom'
// 'middle'和'alphabetic'是我最常用的，'middle'对于垂直居中很有帮助。
ctx.textBaseline = 'middle';

// 5. 绘制填充文本
// 参数：文本内容, x坐标, y坐标, [最大宽度，可选]
ctx.fillText('Hello Canvas Text!', canvas.width / 2, canvas.height / 2);

// 如果你想绘制描边文本，可以这样做：
ctx.font = '36px sans-serif';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2; // 描边宽度
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.strokeText('描边文本', 50, 50);

// 你也可以结合使用填充和描边
ctx.font = '60px Impact';
ctx.fillStyle = 'orange';
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.textAlign = 'center';
ctx.textBaseline = 'alphabetic';
ctx.fillText('混合效果', canvas.width / 2, canvas.height - 100);
ctx.strokeText('混合效果', canvas.width / 2, canvas.height - 100);

登录后复制

在使用

fillText()

登录后复制

或

strokeText()

登录后复制

时，

登录后复制

和

登录后复制

坐标是文本的起始点，但具体哪个点取决于

textAlign

登录后复制

和

textBaseline

登录后复制

的设置。理解这一点非常关键，否则文本位置可能跟你预期的大相径庭。

如何确保Canvas文本在不同设备上显示一致？

当然，仅仅是画出来还不够。实际项目中，我们经常会遇到一个问题：为什么我的Canvas文本在我的高分屏上看起来模糊，或者在别人的电脑上字体大小不对？确保Canvas文本在不同设备上显示一致，这确实是个值得深入探讨的话题。

首先，设备像素比（Device Pixel Ratio）是一个大头。在Retina屏或者其他高DPI设备上，一个CSS像素可能对应多个物理像素。如果你直接按

canvas.width

登录后复制

和

canvas.height

登录后复制

来绘制，文本就会显得模糊。我的做法是，先获取

window.devicePixelRatio

登录后复制

，然后把Canvas的实际绘制尺寸放大这个比例，再用CSS把Canvas的显示尺寸缩小回去。这样，Canvas内部的绘制分辨率就提升了，文本自然就清晰了。

const dpr = window.devicePixelRatio || 1;
canvas.width = originalWidth * dpr;
canvas.height = originalHeight * dpr;
ctx.scale(dpr, dpr); // 缩放上下文，让后续绘制操作仍然使用逻辑像素
// CSS 样式控制显示尺寸
canvas.style.width = originalWidth + 'px';
canvas.style.height = originalHeight + 'px';

登录后复制

其次，字体加载。如果你使用了自定义的Web字体（比如Google Fonts），一定要确保字体在Canvas绘制之前已经完全加载。Canvas在绘制时如果字体还没加载好，它会回退到默认字体，这就会导致文本大小、布局完全错位。我通常会用

document.fonts.ready

登录后复制

Promise或者一些第三方库（如Font Face Observer）来监听字体加载状态，确保在字体就绪后才开始绘制。

// 确保字体加载后再绘制
document.fonts.ready.then(() => {
    // 字体加载完成，现在可以安全地绘制Canvas文本了
    drawTextOnCanvas();
}).catch(err => {
    console.error('字体加载失败:', err);
    // 即使失败，也尝试用默认字体绘制
    drawTextOnCanvas(); 
});

登录后复制

最后，Canvas自身的尺寸管理。确保你设置

canvas.width

登录后复制

和

canvas.height

登录后复制

时使用的是实际绘制的像素值，而不是仅仅通过CSS来拉伸。CSS拉伸Canvas会导致内部绘制的内容（包括文本）被模糊化。如果你想做响应式设计，应该在JavaScript中根据容器大小动态调整

canvas.width

登录后复制

和

canvas.height

登录后复制

，并重新绘制。

艾绘

艾绘：一站式绘本创作平台，AI智能绘本设计神器！

查看详情

Canvas文本换行与溢出处理有哪些技巧？

处理好一致性之后，文本的布局又是另一个挑战，尤其是当内容很长的时候。Canvas本身并没有内置的文本换行功能，这确实有点让人头疼，意味着我们得手动实现。但别担心，

measureText()

登录后复制

方法是我们的救星。

我的通用思路是这样的：

逐字或逐词测量：你需要一个最大宽度限制。然后，遍历你的文本内容，每次添加一个词（或者一个字，如果词太长），用
```
ctx.measureText(currentLine + word).width
```
登录后复制
来检查当前行加上新词后的宽度是否超过了最大宽度。
判断换行：如果超出了，就把新词放到下一行。如果没超出，就继续添加到当前行。
管理行高：每换一行，
```
y
```
登录后复制
坐标就需要增加一个固定的行高（比如
```
fontSize * 1.2
```
登录后复制
），这样文本就不会堆叠在一起。

function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
    const words = text.split(' '); // 通常按空格分割词语
    let line = '';
    let testLine = '';
    let metrics;

    for (let n = 0; n < words.length; n++) {
        testLine = line + words[n] + ' ';
        metrics = ctx.measureText(testLine);
        const testWidth = metrics.width;

        if (testWidth > maxWidth && n > 0) {
            ctx.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    ctx.fillText(line, x, y); // 绘制最后一行
}

// 示例调用
ctx.font = '20px sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
const longText = "这是一段非常长的文本，用来演示在Canvas中如何进行文本的自动换行处理，这需要我们手动计算每一行的宽度并决定何时开始新的一行。";
wrapText(ctx, longText, 50, 150, 300, 25); // x=50, y=150, maxWidth=300, lineHeight=25

登录后复制

对于溢出处理，如果文本行数过多，超出了预设的区域，你可能需要添加省略号（

...

登录后复制

）。这可以在

wrapText

登录后复制

函数中稍作修改：当达到最大行数时，在最后一行的末尾添加

...

登录后复制

，并确保这个

...

登录后复制

不会超出

maxWidth

登录后复制

。这通常需要更精细的计算，可能要截断最后一个词的一部分来容纳省略号。这部分逻辑会稍微复杂一些，但核心还是围绕

measureText()

登录后复制

进行宽度计算。

如何在Canvas中实现更复杂的文本效果，例如阴影、渐变或描边与填充结合？

文本不仅仅是信息载体，它也可以是艺术的一部分。Canvas提供了不少工具，让我们能给文本加上一些“特效”，让它看起来更酷，更有表现力。

1. 文本阴影 给文本添加阴影非常简单，你只需要设置

ctx.shadowColor

登录后复制

ctx.shadowOffsetX

登录后复制

ctx.shadowOffsetY

登录后复制

, 和

ctx.shadowBlur

登录后复制

这几个属性。这和给普通图形添加阴影没什么两样。

ctx.font = '70px "Comic Sans MS"';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 阴影颜色
ctx.shadowOffsetX = 5; // X轴偏移
ctx.shadowOffsetY = 5; // Y轴偏移
ctx.shadowBlur = 8; // 模糊半径

ctx.fillText('带阴影的文本', canvas.width / 2, canvas.height / 2 + 100);

// 注意：阴影属性会影响后续所有绘制，如果不需要，记得重置它们
ctx.shadowColor = 'transparent'; 
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;

登录后复制

2. 文本渐变 让文本拥有渐变色，这能让它瞬间提升一个档次。你需要先创建一个渐变对象（线性或径向），然后把这个渐变对象赋值给

ctx.fillStyle

登录后复制

或

ctx.strokeStyle

登录后复制

。

// 创建一个线性渐变
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // 从左到右
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');

ctx.font = '80px Impact';
ctx.fillStyle = gradient; // 将填充样式设置为渐变
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('渐变文本', canvas.width / 2, canvas.height / 2 - 100);

登录后复制

3. 描边与填充结合 前面也提到了，你可以先

fillText()

登录后复制

再

strokeText()

登录后复制

（或者反过来）。关键在于，你可以给它们设置不同的样式，比如填充用渐变，描边用纯色。这能创造出非常丰富的视觉效果。我经常用这种方法来让文本在复杂的背景下也能保持清晰。

ctx.font = '90px "Arial Black"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 填充部分
ctx.fillStyle = 'lime';
ctx.fillText('酷炫文字', canvas.width / 2, canvas.height / 2);

// 描边部分
ctx.strokeStyle = 'darkgreen';
ctx.lineWidth = 4;
ctx.strokeText('酷炫文字', canvas.width / 2, canvas.height / 2);

登录后复制

记住，每次改变样式（如