canvas文本属性-textBaseline-垂直对齐_canvas textbaseline-CSDN博客

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109526473

本文深入探讨了canvas的textBaseline属性，详细解释了不同垂直对齐方式的含义，并通过实例展示了如何调整文本在canvas上的垂直位置，帮助开发者更好地控制文本绘制效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas文本属性textBaseline</title>
    <style>
        body{margin: 0;overflow: hidden}
        #test{background: antiquewhite;}
    </style>
</head>
<body>
    <canvas id="test"></canvas>
    <script>
        const cvs=document.getElementById('test');
        cvs.width=window.innerWidth;
        cvs.height=window.innerHeight;
        const ctx=cvs.getContext('2d');
    
        /*辅助线*/
        ctx.strokeStyle='#999';
        ctx.setLineDash([8]);
        ctx.moveTo(30,300);
        ctx.lineTo(700,300);
        ctx.stroke();
    
        /*font 设置字号字体*/
        ctx.font="24px Arial";
    
    
    
        /*
        * textBaseline 文字垂直对齐方式
        *   top：上对其
        *   middle：垂直居中对齐
        *   bottom：下对齐
        *   hanging：悬挂基线对齐
        *   alphabetic：标准字母基线对齐，默认
        *   ideographic：表意文字基线
        * */
        ctx.textBaseline='top';
        ctx.fillText('top',100,300);
    
        ctx.textBaseline='middle';
        ctx.fillText('middle',200,300);
    
        ctx.textBaseline='bottom';
        ctx.fillText('bottom',300,300);

        ctx.textBaseline='hanging';
        ctx.fillText('hanging',400,300);
    
        ctx.textBaseline='alphabetic';
        ctx.fillText('alphabetic',500,300);
            
        ctx.textBaseline='ideographic';
        ctx.fillText('ideographic',650,300);
    
    </script>
</body>
</html>