canvas学习笔记未完待续

canvas学习笔记：

基本认识：

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.canvasx相当于一个画布，它可以用于绘制图形、创建动画. <canvas> 最早由Apple引入WebKit，除一些过时的浏览器不支持<canvas> 元素外，所有的新版本主流浏览器都支持它。

基本用法：

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上， 标签只有两个属性—— width和height。id属性并不是<canvas>元素所特有的，而是每一个HTML元素都默认具有的属性（比如class属性）。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。

替换内容：

不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
与 <img> 元素不同， 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

渲染上下文：

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

代码的第一行通过使用 document.getElementById() 方法来为 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

绘制矩形 ：

<canvas> 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。
首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。这三个函数绘制之后会马上显现在canvas上，即时生效。

绘制路径：