Canvas的HelloWorld

是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。
WebGL使用元素来用于网页上的3D图形硬件加速。
今天，我们使用canvas来画一个正方形，了解其基本用法。
首先新建一个html文件：

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），渲染输出三个大的方向。