HTML5Canvas文字怎么绘制_HTML5Canvas绘制文字的方法与文本效果-html教程-PHP中文网

HTML5Canvas文字怎么绘制_HTML5Canvas绘制文字的方法与文本效果

絕刀狂花

发布： 2025-11-20 20:36:13

原创

979人浏览过

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

html5canvas文字怎么绘制_html5canvas绘制文字的方法与文本效果

在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提供文本水平对齐和垂直基线定位的属性，便于精确布局。

Text Mark

处理文本内容的AI助手

查看详情

立即学习“前端免费学习笔记（深入）”；

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文字怎么绘制_HTML5Canvas绘制文字的方法与文本效果的详细内容，更多请关注php中文网其它相关文章！