canvas

canvas 简介 1熟悉api 2做一个动画

<canvas id="tutorial" width="150" height="150"></canvas>
canvas会初始化宽度为300像素和高度为150像素
getContext('2d')  这个方法是用来获得渲染上下文和它的绘画功能

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

绘制矩形

fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形的边框
clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明
rect(x, y, width, height) 绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

1.  首先，你需要创建路径起始点。
2.  然后你使用[画图命令]去画出路径。
3.  之后你把路径封闭。
4.  一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。

线

lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线。

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（认为顺时针）来生成。
anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

色彩

fillStyle 设置图形的填充颜色。
strokeStyle 设置图形轮廓的颜色。
globalAlpha 透明度值为全局

线型styles

lineWidth 设置线条宽度。
lineCap  的值决定了线段端点显示的样子 它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。
lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。