canvas 绘制多行文本不难，可能有坑

上一篇：canvas 导出图片时的安全问题处理

在网页中显示一段文本，文本一旦达到显示区域的边界就会自动换行，而 canvas 却不能，canvas 没有提供绘制多行文本的 api，如果想绘制多行文本，不得不一行一行绘制。

先来看下要实现的效果（纯 canvas 实现）：

我就直接通过代码聊一聊整个绘制过程，先定义一些变量：

let dpr = window.devicePixelRatio || 1;
let startTop = 10;
let pageHeight = 1000;
let pageWidth = 400;

再使用 js 创建一块画布：

const createCanvas