HTML5 Canvas 限定文本区域大小,文字自动换行,自动缩放

复制代码
<!DOCTYPE html>
<html>
<body>

<h1>HTML5 Canvas 限定文本展示范围、自动计算缩放字体大小</h1>

<div id="tips">0</div>
<div id="content">良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺卧尺卧尺厦厦万间只睡卧榻三尺卧尺卧尺万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺卧尺卧尺厦万间只睡卧榻三尺卧尺厦万榻三尺卧尺卧尺榻三间只睡三</div>

<script>
// 默认字体16px,最多一行显示18个字,8行。
// 超出范围后,自动缩小字体。

let maxWidth = 2304; // 合法最大宽度(字体为16px、18个字、8行时的宽度)
let minSize = 10; // 限制最小字号(支持缩到最小的字体大小)

let eleContent = document.getElementById('content');
let eleTips = document.getElementById('tips'); // 将 eleTips 声明为全局变量
let content = eleContent.innerText; // 获取文本内容

let fontSize = calculateFontSize(content, minSize, maxWidth);
eleContent.style.fontSize = fontSize + "px"; // 重设字号
eleTips.innerText = '自适应字体大小:' + fontSize + "px";

function calculateFontSize(text, minSize, maxWidth) {
    let fontSize = 16; // 初始字体大小
    let currWidth = 0;

    while (true) {
        const ctx = document.createElement("canvas").getContext("2d");
        ctx.font = fontSize + "px arial,sans-serif";
        currWidth = ctx.measureText(text).width;
        //eleTips.innerText = currWidth; // 在函数内部访问 eleTips
        
        console.log('当前字号:'+fontSize+'px,当前宽度:'+currWidth+',偏差宽度:'+(currWidth-maxWidth));
        
		//console.log(currWidth)
        if (fontSize <= minSize || maxWidth >= currWidth) {
            break;
        }

        fontSize--;
    }

    return fontSize;
}

</script>
<style>
    div#content {
        width: 290px;
        height: 170px;
        border: 1px solid red;
        font: 16px arial, sans-serif;
        word-wrap: break-word;
    }
</style>
</body>
</html>

演示效果:

相关推荐
无奈何杨18 小时前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼18 小时前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆18 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang18 小时前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆19 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing19 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
程序员爱钓鱼21 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel1 天前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着1 天前
全栈框架next.js入手指南
前端·next.js
你的人类朋友1 天前
什么是API签名?
前端·后端·安全