文字绘制；
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>text</title>
</head> <body>
<canvas id='myCanvas' width='800' height='400'>
your browser does not support canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById('myCanvas');
var cxt = c.getContext('2d');
cxt.beginPath();
cxt.font = '30px Arial';
var txt = 'Hello World';
cxt.fillText(txt, 100, 50);
cxt.strokeStyle = 'red';
cxt.moveTo(100, 50); // 字体坐标是左下角坐标
cxt.lineTo(300, 50);
cxt.moveTo(100, 20); // 字体30px不是30像素
cxt.lineTo(300, 20);
cxt.font = '30pt Arial';
cxt.strokeText(txt, 280, 50); // 字体30pt是30像素 cxt.fillText(txt, 100, 100, 50); // 整个文本宽度50px
cxt.moveTo(100, 100);
cxt.lineTo(150, 100); // 文本宽度是50像素
cxt.stroke(); // 文本对齐的方式
cxt.moveTo(100, 150);
cxt.lineTo(200, 150);
cxt.moveTo(100, 130);
cxt.lineTo(200, 130);
cxt.moveTo(100, 170);
cxt.lineTo(200, 170);
cxt.moveTo(150, 120);
cxt.lineTo(150, 180);
cxt.stroke();
cxt.font = '40pt Arial'; // '40pt Courier New'的字体高度与Arial不一样
cxt.textAlign = 'center'; //center,end,left,right,start
cxt.textBaseline = 'middle'; //alphabetic,bottom,hanging,ideographic,middle,top
cxt.fillText('A', 150, 150);
</script>
</body> </html>