您的位置：首页 > Web前端 > HTML5

html5教程（三）（canvas绘制文字）

2011-06-16 11:53 811 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

html5教程 （三）（canvas绘制文字）

html5教程（三）（canvas绘制文字）