<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。
WebGL使用<canvas>元素来用于网页上的3D图形硬件加速。
今天，我们使用canvas来画一个正方形，了解其基本用法。
首先新建一个html文件：
<!doctype html>
<html lang="en">
<head>
<title>Canvas 的 HelloWorld</title>
</head>
<body>
</body>
</html>
canvas英语里面就是画布的意思，我们作画之前先把画布放到网页里面：
<canvas id="canvas"></canvas>
画布算是放好了，id属性可以让我们在后面的JavaScript代码中选择引用该元素（这里就是canvas画布）。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
文本的样式
有样式的文本
在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式：
-
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 -
textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。 -
textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 -
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
如果你之前使用过CSS，那么这些选项你会很熟悉。
文本的测量
当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。
measureText()
将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
下面的代码段将展示如何测量文本来获得它的宽度：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
总结
这里我们通过在canvas上写字对HTML5的canvas有一个初步印象。一般来说就是放置画布（canvas），获取上下文（2D或WebGL），渲染输出三个大的方向。
