HTML5Canvas文字绘制教程详解

一分耕耘，一分收获！既然打开了这篇文章《HTML5 Canvas绘制文字教程》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

Canvas绘制文字主要用fillText()和strokeText()方法，结合font、textAlign、textBaseline等属性设置样式与布局，支持阴影、渐变等效果，需先设样式再绘制。

在HTML5的Canvas中绘制文字，主要依赖于fillText()和strokeText()这两个方法。通过设置字体样式、对齐方式、颜色等属性，可以实现丰富的文本效果。

1. 基本文字绘制方法

使用fillText(text, x, y)可以在指定位置填充实心文字；使用strokeText(text, x, y)则绘制空心（描边）文字。

• text：要绘制的文字内容
• x, y：文字在画布上的起始坐标（注意：y是基线位置）

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillText('Hello Canvas', 50, 100);
ctx.strokeText('Outline Text', 50, 150);

2. 设置字体样式

通过ctx.font属性可设置字体大小、字族、粗细等，格式与CSS类似。

• 语法：ctx.font = 'italic bold 24px sans-serif';
• 支持常见字体如Arial、Georgia，也支持自定义@font-face引入的字体
• 必须在调用fillText或strokeText前设置

3. 文本对齐与基线控制

Canvas提供文本水平对齐和垂直基线定位的属性，便于精确布局。

• ctx.textAlign：可设为left、center、right
• ctx.textBaseline：常用值有alphabetic（默认）、top、middle、bottom

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('居中文本', canvas.width/2, canvas.height/2);

4. 添加文本效果

结合其他Canvas特性，可实现阴影、渐变、描边等视觉效果。

• 使用ctx.shadowColor、shadowBlur添加阴影
• 用createLinearGradient创建渐变色填充
• 通过lineWidth和strokeStyle控制描边样式

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(1, 'purple');
ctx.fillStyle = gradient;
ctx.fillText('彩色文字', 60, 200);

基本上就这些。掌握这些方法后，你可以在Canvas中灵活地渲染各种文字内容，配合动画还能做出动态文本效果。关键是先设置样式，再调用绘制方法，顺序不能错。

文中关于绘制文字的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5Canvas文字绘制教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。