当前位置：首页 > 行业动态 > 正文

html画布字体

在HTML画布中，通过 context.font设置字体（如”italic 400 16px Arial”），用 fillText绘制，需确保 字体

HTML 画布字体详解

Canvas 文字基础

属性/方法 说明 示例代码
fillText(text, x, y) 绘制填充文字，x,y 为文字基线起点坐标 ctx.fillText('Hello', 50, 100);
strokeText(text, x, y) 绘制描边文字 ctx.strokeText('Hello', 50, 100);
font 设置字体（格式：粗细 斜体 字号 字体族） ctx.font = 'bold italic 20px Arial';
fillStyle 设置填充颜色（支持颜色值、渐变、图案） ctx.fillStyle = '#336699';
strokeStyle 设置描边颜色 ctx.strokeStyle = 'red';
textAlign 水平对齐方式（left/right/center） ctx.textAlign = 'center';
textBaseline 垂直对齐方式（top/middle/bottom） ctx.textBaseline = 'middle';

字体属性详解

属性 可选值 说明
字体粗细 normal / bold / bolder / lighter 控制文字粗细程度
字体样式 normal / italic / oblique 控制文字倾斜（斜体）
字号 px / em / / vw / vh 推荐使用 px 单位
字体族 具体字体名称（如 Arial）或通用族（如 serif） 优先使用用户设备已安装的字体

示例： 

ctx.font = '16px "Microsoft YaHei", sans-serif'; // 指定字体及备选方案

文字样式调整

属性 说明 示例代码
颜色与透明度 支持十六进制、RGB、HSL及透明度（如 rgba） ctx.fillStyle = 'rgba(255,0,0,0.5)';
阴影效果 通过 shadowColor、shadowBlur、shadowOffsetX/Y 实现 ctx.shadowColor = 'gray'; ctx.shadowBlur = 5;
渐变填充 使用 createLinearGradient 或 createRadialGradient “`javascript

const grad = ctx.createLinearGradient(0, 0, 100, 0);
grad.addColorStop(0, ‘blue’);
grad.addColorStop(1, ‘white’);
ctx.fillStyle = grad;

---
# 四、文本测量与换行
| 方法               | 说明                                         | 示例代码                                      |
|--------------------|----------------------------------------------|-----------------------------------------------|
| `measureText(text)` | 返回文本宽度（用于精确布局）                 | ```javascript
const metrics = ctx.measureText('Hello');
console.log(metrics.width); // 输出文字宽度
``` |
| 自动换行        | 根据最大宽度分割文本                         | ```javascript
function wrapText(text, maxWidth, x, y) {
  const words = text.split('');
  let line = '';
  for (let i = 0; i < words.length; i++) {
    const testLine = line + words[i];
    const metrics = ctx.measureText(testLine);
    if (metrics.width > maxWidth) {
      ctx.fillText(line, x, y);
      y += parseInt(ctx.font); // 换行
      line = words[i];
    } else {
      line = testLine;
    }
  }
  ctx.fillText(line, x, y);
}
``` |
---
# 五、高级文字效果
| 效果               | 实现思路                                     | 示例代码                                      |
|--------------------|----------------------------------------------|-----------------------------------------------|
| 轮廓文字        | 先描边后填充（或反向操作）                   | ```javascript
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;
ctx.strokeText('Outline', 50, 100);
ctx.fillStyle = 'white';
ctx.fillText('Outline', 50, 100);
``` |
| 文字变形        | 结合路径（Path）绘制变形文字                  | ```javascript
ctx.font = '40px Arial';
ctx.fillStyle = 'blue';
ctx.translate(100, 150); // 移动原点
ctx.rotate(-Math.PI / 6); // 旋转30度
ctx.fillText('Rotated', 0, 0);
``` |
---
 问题与解答
# 问题1：如何在 Canvas 中让文字水平居中且垂直居中？
解答：  
1. 设置 `textAlign` 为 `center`，使文字水平居中。  
2. 设置 `textBaseline` 为 `middle`，使文字垂直居中。  
3. 绘制时，`x,y` 坐标为目标区域的中心点。  
示例：  
```javascript
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Centered', canvas.width / 2, canvas.height / 2);

问题2：如何实现文字渐变填充效果？

解答：

  1. 创建线性或径向渐变对象。
  2. 定义渐变起止点的颜色。
  3. 将 fillStyle 设置为渐变对象。
    示例： 

    const grad = ctx.createLinearGradient(0, 0, 0, 50); // 垂直渐变
grad.addColorStop(0, 'red');
grad.addColorStop(1, 'yellow');
ctx.fillStyle = grad;
ctx.fillText('Gradient Text', 50, 10
canvas字体
0

相关文章