html5教程 (三)(canvas绘制文字)

 <!DOCTYPE HTML>

<html>
 <head>
  <title>Canvas</title>
 </head>
 
 <body>
<canvas id="my_canvas" width="200" height="200" style="border:1px solid #ff0000"></canvas>
<script type="text/javascript">
var elem = document.getElementById("my_canvas");
if (elem && elem.getContext)  {
var context = elem.getContext("2d");
context.fillStyle    = '#00f';    
//font:文字字体,同 CSSfont-family 属性
context.font         = 'italic  30px 微软雅黑';    //斜体 30像素 微软雅黑字体
//textAlign:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
context.textAlign = 'left';
//文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic
context.textBaseline = 'top';    
//要输出的文字内容,文字位置坐标, 第四个参数为可选选项——最大宽度。如果需要的话,浏览器会缩减文字以让它适应指定宽度
context.fillText  ('Hello world!', 0, 0,50);    //有填充
context.font         = 'bold 30px sans-serif';    
context.strokeText('Hello world!', 0, 50,100);  //只有文字边框
}
</script>
 </body>
</html>
 

你可能感兴趣的:(canvas,html5,职场,休闲,canvas绘制文字)