<!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>