1. Canvas文字绘制基础入门第一次接触Canvas文字绘制时我也被那一堆API参数搞得头晕。但实际用起来你会发现核心方法就两个fillText和strokeText。这两个方法就像写字时的两种笔——前者是马克笔实心填充后者是勾线笔空心描边。先看个最简单的例子const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); // 实心文字默认黑色 ctx.fillText(Hello Canvas, 50, 50); // 空心文字需要先设置描边样式 ctx.strokeStyle red; ctx.strokeText(Hello Canvas, 50, 100);这里有个新手常踩的坑strokeText如果不设置strokeStyle就不会显示任何内容。我刚开始用时就纳闷为什么描边文字出不来后来才发现漏了这步。而fillText默认使用黑色填充所以不设置样式也能看到效果。2. 字体样式的全面控制字体样式主要通过font属性设置这个属性值其实和CSS的font语法完全一致。还记得我第一次用的时候习惯性地写成fontSize:20px这种分开的形式结果完全不起作用。正确的写法应该是ctx.font italic bold 24px Microsoft YaHei;这个字符串包含字体风格italic/oblique/normal字重bold/normal/100-900字号必须带单位px字体系列建议用引号包裹实测中发现一个有趣现象字重数值在Canvas中表现不如CSS精确。设置font-weight:600和bold在网页上可能有区别但在Canvas渲染中几乎看不出差异。3. 文字对齐的精准控制3.1 水平对齐(textAlign)textAlign属性控制文字相对于锚点的水平位置有五个可选值left锚点在文字左侧right锚点在文字右侧center锚点在文字中心start根据文本方向决定默认等同于leftend根据文本方向决定看这个对比示例ctx.strokeStyle red; ctx.moveTo(200, 0); ctx.lineTo(200, 150); ctx.stroke(); // 画一条参考线 ctx.textAlign left; ctx.fillText(Left对齐, 200, 30); ctx.textAlign center; ctx.fillText(Center对齐, 200, 60); ctx.textAlign right; ctx.fillText(Right对齐, 200, 90);3.2 垂直基线(textBaseline)textBaseline更难理解些它决定文字垂直方向如何对齐锚点。常见值包括alphabetic字母基线默认值top文字顶部对齐hanging悬挂基线类似中文拼音线middle文字中间线bottom文字底部这个属性在实现文字垂直居中时特别有用。比如要让文字在矩形框内居中const boxHeight 100; const yPos boxHeight / 2; ctx.textBaseline middle; ctx.fillText(完美居中, 50, yPos);4. 高级文字效果实战4.1 渐变文字效果结合createLinearGradient可以实现彩虹文字const gradient ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, red); gradient.addColorStop(0.5, green); gradient.addColorStop(1, blue); ctx.fillStyle gradient; ctx.fillText(渐变彩虹文字, 50, 150);4.2 文字描边填充组合要实现同时有描边和填充的文字需要调用两个方法ctx.font bold 36px Arial; ctx.strokeStyle black; ctx.lineWidth 3; ctx.fillStyle yellow; // 注意顺序先描边后填充 ctx.strokeText(双效文字, 50, 200); ctx.fillText(双效文字, 50, 200);这里有个细节描边宽度不宜过大否则会淹没填充色。一般2-3px就足够。5. 文字测量与精确布局measureText()方法可以获取文字宽度这对自动换行、居中布局非常有用const text 需要测量的文字; const metrics ctx.measureText(text); console.log(metrics.width); // 文字宽度但要注意measureText只返回宽度不返回高度。要计算文字高度可以通过实际渲染测试得出经验值通常约等于fontSize的1.2倍。6. 性能优化与常见问题在实现文字编辑器这类需要频繁重绘的场景时我有几个实战建议避免频繁设置样式连续绘制相同样式文字时不要每次重复设置font慎用阴影效果textShadow虽然好看但会显著降低性能考虑使用缓存对静态文字可以先绘制到离屏canvas遇到文字模糊的问题时检查是否使用了整数坐标非整数会有抗锯齿canvas的CSS尺寸是否与属性尺寸一致在高DPI设备上是否使用了devicePixelRatio缩放7. 交互式文字预览器实现结合上述知识我们可以创建一个实时预览不同文字样式的工具。核心代码如下function updatePreview() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 应用当前选择的样式 ctx.font ${fontStyle.value} ${fontWeight.value} ${fontSize.value}px ${fontFamily.value}; ctx.textAlign textAlign.value; ctx.textBaseline textBaseline.value; // 绘制参考线和文字 ctx.strokeStyle red; ctx.beginPath(); ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2, canvas.height); ctx.moveTo(0, canvas.height/2); ctx.lineTo(canvas.width, canvas.height/2); ctx.stroke(); ctx.fillStyle fillColor.value; ctx.fillText(previewText.value, canvas.width/2, canvas.height/2); } // 监听所有输入控件的变化 document.querySelectorAll(select, input).forEach(el { el.addEventListener(change, updatePreview); });这个实现展示了如何动态响应样式变化帮助开发者直观理解每个属性的作用。