HTML5画布文本基线教程

来源：互联网发布：sal绘画软件下载编辑：程序博客网时间：2024/06/06 08:04

垂直对齐文本与HTML5画布,我们可以使用textBaseline画布的属性上下文。textBaseline可以设置以下值之一:top, hanging, middle, alphabetic, ideographic, 和bottom。除非另有规定,textBaseline属性是字母的违约。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      var x = canvas.width / 2;      var y = canvas.height / 2;      context.font = '30pt Calibri';      // textAlign aligns text horizontally relative to placement      context.textAlign = 'center';      // textBaseline aligns text vertically relative to font style      context.textBaseline = 'middle';      context.fillStyle = 'blue';      context.fillText('Hello World!', x, y);    </script>  </body></html>

0 0