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>

演示效果:

相关推荐
aha-凯心1 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没18 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN18 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户990450177800932 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家35 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636022 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端