[js高手之路] html5 canvas系列教程 – 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

接着上文线条样式[js高手之路] html5 canvas系列教程 – 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续.

canvas提供两种输出文本的方式：

strokeText：描边文本

fillText：填充文本

fillStyle配合fillText使用，strokeStyle配合strokeText使用

strokeText用法：

cxt.strokeText( text， x, y, [maxwidth] )

text：需要输出的文本内容

x：最左边的文本输出的横坐标位置

y：最左边的文本的左下角的纵坐标

maxWidth：这个是可选参数，意思就是文本最多能占用maxWidth这么宽，如果文本的实际宽度比maxWidth宽，就会有一种压缩(被挤扁)的效果。

 <meta charset='utf-8' />
 <style>
 body {
     background: #000;
 }
 #canvas{
     background:white;
 }
 </style>
 <script>
 window.onload = function(){
     var oCanvas = document.querySelector( "#canvas" ),
         oGc = oCanvas.getContext( '2d' ),         text = '跟着ghostwu学习canvas';
         oGc.font = 'bold 30px 微软雅黑';
         oGc.strokeStyle = '#09f';
         oGc.strokeText( text, 100, 100 );
         oGc.strokeText( text, 100, 200, 200 );
 }
 </script>
 </head>
 <body>
 <canvas id="canvas" width="600" height="300"></canvas>
 </body>

fillText：填充文本，参数跟strokeText一样

text = ‘跟着ghostwu学习canvas’;oGc.font = ‘bold 30px 微软雅黑’;oGc.fillStyle = ‘#09f’;oGc.fillText( text, 100, 100 );oGc.fillText( text, 100, 200, 200 );

measureText：获取文本的宽度(长度)，它返回的是一个对象，对象有一个属性width，就是文本的长度了.

cxt.measureText( text ).width

输出一段水平居中的文本

 <meta charset='utf-8' />
 <style>
 body {
     background: #000;
 }
 #canvas{
     background:white;
 }
 </style>
 <script>
 window.onload = function(){
     var oCanvas = document.querySelector( "#canvas" ),
         oGc = oCanvas.getContext( '2d' ),
         width = oCanvas.width,
         text = '跟着ghostwu学习canvas';         oGc.font = 'bold 30px 微软雅黑';
         oGc.fillStyle = '#09f';
         oGc.fillText( text, ( width - oGc.measureText( text ).width ) / 2, 100 );
 }
 </script>
 </head>
 <body>
 <canvas id="canvas" width="600" height="300"></canvas>
 </body>

font属性跟css是一样的用法

cxt.font = “font-style font-weight font-size/line-height font-family”

textAlign：文本水平对齐方式

cxt.textAlign = ‘start/end/left/right/center’;

start跟left差不多，end跟right差不多.

 <meta charset='utf-8' />
 <style>
 body {
     background: #000;
 }
 #canvas{
     background:white;
 }
 </style>
 <script>
 window.onload = function(){
     var oCanvas = document.querySelector( "#canvas" ),
         oGc = oCanvas.getContext( '2d' ),
         width = oCanvas.width,
         height = oCanvas.height,
         text = '跟着ghostwu学习canvas';         oGc.font = 'bold 16px 微软雅黑';
         oGc.fillStyle = '#09f';         var xPos = ( width ) / 2;
         oGc.moveTo( xPos, 0 );
         oGc.lineTo( xPos, height );
         oGc.stroke();         oGc.textAlign = 'start';
         oGc.fillText( text, 300, 30 );
         oGc.textAlign = 'left';
         oGc.fillText( text, 300, 60 );
         oGc.textAlign = 'right';
         oGc.fillText( text, 300, 90 );
         oGc.textAlign = 'end';
         oGc.fillText( text, 300, 120 );
         oGc.textAlign = 'center';
         oGc.fillText( text, 300, 150 );
 }
 </script>
 </head>
 <body>
 <canvas id="canvas" width="600" height="300"></canvas>
 </body>