canvas的学习笔记 10 文本
canvas提供两种方法来渲染文本
1、fillText（text,x,y[,maxWidth]）在指定的（x,y）位置填充指定文本，绘制的最大宽度是可选的
2、strokeText(text,x,y[,maxWidth])在制定的（x,y）位置绘制文本边框，绘制的最大宽度是可选的
3、font=value当前我们用来绘制文本的样式，这个字符串使用和css font属性相同的语法，默认字体是10px sans-serif
4、textAlign=value文本对齐选项，可选的值包括：start、end、left、right、center、默认值是stare
5、textBaseline=value基线对齐选项，可选的值包括：top、hanging、Middle、alphabetic, ideographic, bottom。默认值是 alphabetic。。
6、direction=value文本方向，可能的值，tr, rtl, inherit。默认值是 inherit。没有试出来
具体demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制文本</title>
<style>
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="tutorial" width="500px" height="300px"></canvas>
</body>
<script>
function draw(){
var canvas= document.getElementById("tutorial")
if(!canvas.getContext) return;
var ctx=canvas.getContext("2d");
ctx.font = "100px sans-serif";
ctx.textBaseline="top";
ctx.fillText("大大小小",10,100);
ctx.strokeText("多多少少",50,200);
}
draw()
</script>
</html>
