demo1 fillText strokeText绘制文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> fillText strokeText</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.font='30px Arial';
_2d.fillText('dtdxrk',50,50);/*fillText(text,x,y,max width)*/
_2d.strokeText('dtdxrk',50,100);/*strokeText(text,x,y,max width)*/
</script>
</body>
</html>
demo2 字体 大小 粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体 大小 粗细</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.font='30px Arial';
_2d.fillText('dtdxrk',10,30);/*fillText(text,x,y,max width)*/
_2d.font='italic 40px simsun';
_2d.fillText('dtdxrk',10,100);/*fillText(text,x,y,max width)*/
_2d.font='bold 22px simsun';
_2d.fillText('dtdxrk',10,150);/*fillText(text,x,y,max width)*/
</script>
</body>
</html>
demo3 文字对齐 textAlign textBaseline
感觉没啥好说的
http://www.w3school.com.cn/tags/canvas_textalign.asp
_2d.textAlign="center|end|left|right|start";
http://www.w3school.com.cn/tags/canvas_textbaseline.asp
_2d.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";