关注我们

HTML5 中的 Text and Fonts函数

HTML5 canvas提供了使用下面列出的不同字体和文本属性创建文本的功能-

产品编号。	属性和说明
1	font [=value] 链接：https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-text-fonts.html 来源：LearnFk无涯教程网此属性返回当前字体设置，可以进行设置以更改字体。
2	textAlign [=value] 此属性返回当前文本对齐方式设置，可以进行设置以更改对齐方式。可能的值是开始(start)，结束(end)，左(left)，右(right)和居中(center)。
3	textBaseline [=value] 此属性返回当前基线对齐设置，可以进行设置以更改基线对齐。可能的值为top，hang，middle，alphabetic，ideographic和bottom。
4	fillText(text，x，y [，maxWidth]) 此属性在给定坐标x和y指示的给定位置填充给定文本。
5	strokeText(text，x，y [，maxWidth]) 此属性在给定坐标x和y指示的给定位置处描画给定文本。

以下是一个简单的示例，该示例利用上述属性绘制文本-

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type="text/javascript">
         function drawShape() {
         
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
            
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               ctx.fillStyle='#00F';
               ctx.font='Italic 30px Sans-Serif';
               
               ctx.textBaseline='Top';
               ctx.fillText('Hello world!', 40, 100);
               
               ctx.font='Bold 30px Sans-Serif';
               ctx.strokeText('Hello world!', 40, 50);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id="test" onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
   
</html>