04.md

绘制文字

绘制文本的基本API

前提基础是根据 canvas DOM创建的二维上下文

context = canvas.getContext('2d') 。

以下操作例子 demo 源码地址 https://github.com/chenshenhai/canvas-note/tree/master/demo/basic/drawing-font

绘制文本

绘制填充文本

/**
 * @param {string} text 文本内容字符串
 * @param {number} x 绘制X轴起点坐标
 * @param {number} y 绘制Y轴起点坐标
 * @param {number} maxWidth [选填] 绘制区域最大宽度
 * */
context.fillText(text, x, y maxWidth);

绘制描边文本

/**
 * @param {string} text 文本内容字符串
 * @param {number} x 绘制X轴起点坐标
 * @param {number} y 绘制Y轴起点坐标
 * @param {number} maxWidth [选填] 绘制区域最大宽度
 * */
context.strokeText(text, x, y maxWidth);

实际填充/描边文本绘制

<canvas id="canvas-1"></canvas>

(function() {
  // 绘制文本 canvas-1
  const canvas = document.getElementById('canvas-1');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');

  context.font = '40px Microsoft YaHei';

  // 填充文本
  context.fillText('hello canvas-note!', 50, 100, 300)
  // 描边文本
  context.strokeText('hello canvas-note!', 50, 200, 300)
})();

文本绘制样式

字体样式

• 和CSS的文本样式设置类似
• 例如这个设置字体大小为20px，字体类型为微软雅黑Microsoft YaHei;

context.font = '20px Microsoft YaHei'

文本对齐

• 可选 start, end, left, right , center
• 默认为 start

context.textAlign = 'start';

实际操作绘制文本对齐方式

<canvas id="canvas-2"></canvas>

(function() {
  // 文本对齐方式 canvas-2
  const canvas = document.getElementById('canvas-2');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');
  context.font = '20px Microsoft YaHei';

  context.textAlign = 'start';
  context.fillText('hello canvas-note!', 100, 50, 200);

  context.textAlign = 'end';
  context.fillText('hello canvas-note!', 100, 100, 200);

  context.textAlign = 'left';
  context.fillText('hello canvas-note!', 100, 150, 200);

  context.textAlign = 'right';
  context.fillText('hello canvas-note!', 100, 200, 200);

  context.textAlign = 'center';
  context.fillText('hello canvas-note!', 100, 250, 200);
})();

基线对齐

• 可选 top, hanging, middle, alphabetic, ideographic, bottom
• 默认为 alphabetic

context.textBaseline = 'alphabetic';

实际操作绘制文本基线对齐

<canvas id="canvas-3"></canvas>

(function() {
  // 基线对齐方式 canvas-3
  const canvas = document.getElementById('canvas-3');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');
  context.font = '20px Microsoft YaHei';

  context.textBaseline = 'top';
  context.fillText('hello canvas-note!', 100, 50, 200);

  context.textBaseline = 'hanging';
  context.fillText('hello canvas-note!', 100, 100, 200);

  context.textBaseline = 'middle';
  context.fillText('hello canvas-note!', 100, 150, 200);

  context.textBaseline = 'alphabetic';
  context.fillText('hello canvas-note!', 100, 200, 200);

  context.textBaseline = 'ideographic';
  context.fillText('hello canvas-note!', 100, 250, 200);

  context.textBaseline = 'bottom';
  context.fillText('hello canvas-note!', 100, 300, 200);
})();

文本方向

• 可选 ltr, rtl, inherit
• 默认为 inherit

context.direction = 'inherit';

实际操作绘制文本方向

<canvas id="canvas-4"></canvas>

(function() {
  // 文本方向方式 canvas-4
  const canvas = document.getElementById('canvas-4');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');
  context.font = '20px Microsoft YaHei';

  context.direction = 'ltr';
  context.fillText('hello canvas-note!', 100, 150, 200);

  context.direction = 'rtl';
  context.fillText('hello canvas-note!', 100, 200, 200);

  context.direction = 'inherit';
  context.fillText('hello canvas-note!', 100, 250, 200);
})();

获取文本尺寸

const text = context.measureText('hello');
console.log(text.width);

实际操作获取文本尺寸

<canvas id="canvas-5"></canvas>

(function() {
  // 文本宽度预测量 canvas-5
  const canvas = document.getElementById('canvas-5');
  canvas.width = 400;
  canvas.height = 400;
  const context = canvas.getContext('2d');
  context.font = '20px Microsoft YaHei';

  const textContent = 'hello canvas-note!'
  context.fillText(textContent, 100, 100, 200);
  const text = context.measureText(textContent);
  console.log(text.width);
})();