JS canvas多行文本绘制尺寸自适应

canvas fill text , font size resize to fit container

h5, canvas, text

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1374
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

let text = "Hello World \n TECHBROOD \n STONE 3D"

fitTextCenter()

function fitTextCenter() {
    let fontSize = getFontSizeToFit(ctx, text, "Arial", c.width, c.height)
    ctx.font = fontSize + "px Arial"

fillTextCenter(ctx, text, 0, 0, c.width, c.height)
}

function fillTextCenter(ctx, text, x, y, width, height) {
    ctx.textBaseline = 'middle';
    ctx.textAlign = "center";

const lines = text.match(/[^\r\n]+/g);
    for (let i = 0; i < lines.length; i++) {
        let xL = (width - x) / 2
        let yL = y + (height / (lines.length + 1)) * (i + 1)

ctx.fillText(lines[i], xL, yL)
    }
}

function getFontSizeToFit(ctx, text, fontFace, width, height) {
    ctx.font = `1px ${fontFace}`;

let fitFontWidth = Number.MAX_VALUE
    const lines = text.match(/[^\r\n]+/g);
    lines.forEach(line => {
        fitFontWidth = Math.min(fitFontWidth, width / ctx.measureText(line).width)
    })
    let fitFontHeight = height / (lines.length * 1.2); // if you want more spacing between line, you can increase this value
    return Math.min(fitFontHeight, fitFontWidth)
}

编译

CSS

HTML

canvas fill text , font size resize to fit container

h5, canvas, text

编辑器支持Emmet

快捷键

canvas fill text , font size resize to fit container

h5, canvas, text

使用canvas在文本段落字里行间插入自适应曲线图

html5 canvas上绘制无穷大符号粒子加载动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：