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

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

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

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

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

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

再使用 js 创建一块画布：

const createCanvas = () => {
    let canvas = document.createElement('canvas') as HTMLCanvasElement;
    canvas.width = pageWidth * dpr;
    canvas.height = pageHeight * dpr;
    canvas.style.width = `${pageWidth}px`;
    canvas.style.height = `${pageHeight}px`;
    canvas.style.padding = '20px';
    canvas.style.borderRadius = '8px';
    canvas.style.backgroundColor = '#fff';
    canvas.style.marginTop = '20px';
    return canvas;
}

设置绘制上下文的样式，比如字体大小，字体颜色等：

const setCtxStyle = (ctx: CanvasRenderingContext2D) => {
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

    ctx.fillStyle = '#222';
    ctx.font = '20px Times';
    // "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
    ctx.textBaseline = 'top';
    // "center" | "end" | "left" | "right" | "start";
    // 值不同，绘制的时候 fillText 的坐标也要修改
    ctx.textAlign = 'left';
}

进行绘制，绘制原理是计算每行能绘制多少个字，一行绘制完进行绘制下一行，canvas 提供了一个函数 measureText 可以测算出在当前画布绘制某段文字所占用的宽度。上次咨询了一位朋友，告诉我说这个方法对自定义字体可能存在误差，不过我还没遇到：

const doDraw = (ctx: CanvasRenderingContext2D, text: string) => {
    // fillText(text, x, y, maxWidth)
    // maxWidth 设置了 maxWidth 绘制的文本会重叠
    let allChars = text.split('');
    // 每行的内容
    let lineText = '';
    let y = startTop;
    // 每行的高度
    let lineHeight = 34;
    for (let i = 0; i < allChars.length; i++) {
        // measureText 可计算绘制内容的宽度
        let metric = ctx.measureText(lineText + allChars[i]);
        if (metric.width < ctx.canvas.width / dpr) {
            lineText += allChars[i];
            if (i === allChars.length - 1) {
                // 绘制结束的文本
                ctx.fillText(lineText, 0, y);
            }
        }
        else {
            // 绘制整行内容
            ctx.fillText(lineText, 0, y);
            lineText = allChars[i];
            y =  y + lineHeight;
        }
    }
}

main 函数，调用各个步骤：

const drawMutiText = (text: string) => {
    let canvas = createCanvas();
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
    setCtxStyle(ctx);

    doDraw(ctx, text);

    let parent = document.getElementById('muti-text-demo');
    parent.appendChild(canvas);
}

这就是绘制多行文本的思路，其实上面的代码并不严谨，因为绘制一段文本时，文本的字体大小、使用的字体可能并不相同，如果遇到这种情况需要动态设置字体的样式。

不过，本文主要是提供一种思路。绘制完多行文本后，下一步需要实现在 canvas 上选择内容进行复制。

大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/