答案：在Canvas上绘制文本需获取2D上下文，设置字体、颜色、对齐方式和基线后，调用fillText()或strokeText()方法绘制；为确保跨设备一致性，应处理设备像素比、字体加载和Canvas尺寸管理；换行需借助measureText()手动计算，溢出可加省略号；复杂效果如阴影、渐变可通过shadow属性和createLinearGradient实现，结合fillText与strokeText可增强视觉表现。
要在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()
时，
x
和
y
坐标是文本的起始点，但具体哪个点取决于
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
，并重新绘制。
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 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);
记住，每次改变样式（如
fillStyle
,
strokeStyle
,
lineWidth
等）时，这些改变都会影响后续的绘图操作。如果你需要临时改变样式，然后又恢复到之前的状态，使用
ctx.save()
和
ctx.restore()
是一个非常好的习惯。这能避免很多意想不到的样式污染问题，让你的代码更健壮。我个人在处理复杂图形和文本时，几乎都会习惯性地用
save()
和
restore()
包裹起来。
以上就是canvas如何绘制文本的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574004.html
微信扫一扫 
支付宝扫一扫 
