HTML canvas textBaseline 属性

在 HTML5 中，我们可以使用 <canvas> 元素来绘制图形、动画以及其他视觉效果。其中，<canvas> 元素提供了一个属性 textBaseline，用于设置文本基线的对齐方式。文本基线是文本的基准线，用于确定文本的垂直位置。

textBaseline 属性的取值

textBaseline 属性有以下几种取值：

• alphabetic：默认值，文本基线是普通的字母基线
• top：文本基线是文本的顶端
• hanging：文本基线是悬挂基线
• middle：文本基线是中间基线
• ideographic：文本基线是表意基线
• bottom：文本基线是文本的底端

示例代码

下面是一个简单的示例代码，演示了如何使用 textBaseline 属性来设置文本基线的对齐方式：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Canvas textBaseline Example</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.font = '20px Arial';

        ctx.textBaseline = 'top';
        ctx.fillText('Top baseline', 10, 30);

        ctx.textBaseline = 'middle';
        ctx.fillText('Middle baseline', 10, 50);

        ctx.textBaseline = 'bottom';
        ctx.fillText('Bottom baseline', 10, 70);
    </script>
</body>
</html>

在上面的示例中，我们创建了一个 <canvas> 元素，并通过 JavaScript 获取了其上下文。然后，我们使用 fillText() 方法绘制了三行文本，分别设置了不同的文本基线对齐方式。

总结

通过使用 textBaseline 属性，我们可以轻松地控制文本在 <canvas> 元素中的垂直对齐方式，从而实现更加灵活多样的文本布局效果。在实际开发中，可以根据具体需求选择合适的文本基线对齐方式，从而达到更好的视觉效果。