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

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4.  
    5. <h1>HTML5 Canvas 限定文本展示范围、自动计算缩放字体大小</h1>
    6.  
    7. <div id="tips">0</div>
    8. <div id="content">良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺卧尺卧尺厦厦万间只睡卧榻三尺卧尺卧尺万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺良田千顷不过一日三餐广厦万间只睡卧榻三尺卧尺卧尺厦万间只睡卧榻三尺卧尺厦万榻三尺卧尺卧尺榻三间只睡三</div>
    9.  
    10. <script>
    11. // 默认字体16px，最多一行显示18个字，8行。
    12. // 超出范围后，自动缩小字体。
    13.  
    14. let maxWidth = 2304; // 合法最大宽度（字体为16px、18个字、8行时的宽度）
    15. let minSize = 10; // 限制最小字号（支持缩到最小的字体大小）
    16.  
    17. let eleContent = document.getElementById('content');
    18. let eleTips = document.getElementById('tips'); // 将 eleTips 声明为全局变量
    19. let content = eleContent.innerText; // 获取文本内容
    20.  
    21. let fontSize = calculateFontSize(content, minSize, maxWidth);
    22. eleContent.style.fontSize = fontSize + "px"; // 重设字号
    23. eleTips.innerText = '自适应字体大小:' + fontSize + "px";
    24.  
    25. function calculateFontSize(text, minSize, maxWidth) {
    26.     let fontSize = 16; // 初始字体大小
    27.     let currWidth = 0;
    28.  
    29.     while (true) {
    30.         const ctx = document.createElement("canvas").getContext("2d");
    31.         ctx.font = fontSize + "px arial,sans-serif";
    32.         currWidth = ctx.measureText(text).width;
    33.         //eleTips.innerText = currWidth; // 在函数内部访问 eleTips
    34.         
    35.         console.log('当前字号:'+fontSize+'px，当前宽度:'+currWidth+'，偏差宽度:'+(currWidth-maxWidth));
    36.         
    37. 		//console.log(currWidth)
    38.         if (fontSize <= minSize || maxWidth >= currWidth) {
    39.             break;
    40.         }
    41.  
    42.         fontSize--;
    43.     }
    44.  
    45.     return fontSize;
    46. }
    47.  
    48. </script>
    49. <style>
    50.     div#content {
    51.         width: 290px;
    52.         height: 170px;
    53.         border: 1px solid red;
    54.         font: 16px arial, sans-serif;
    55.         word-wrap: break-word;
    56.     }
    57. </style>
    58. </body>
    59. </html>

    演示效果：

  • 相关阅读:
    深入理解Java内存模型JMM与volatile关键字
    Leetcode101.对称二叉树
    时间空间复杂度
    GIT技巧
    开发者高评分IDE工具盘点
    【dp】背包问题
    彻底删除git历史记录中的文件
    CPP代码检查工具
    阿里云python训练营-Python基础学习03
    排序算法——简单选择排序
  • 原文地址：https://blog.csdn.net/qq285679784/article/details/136236724