Canvas
Canvas 是HTML5新增的组件，它就是一块画布，可以用JavaScript在上绘制各种图标、动画等。
Web页面增加画布
Canvas元素是一个标准的HTML5元素，可以直接在HTML5页面中添加<canvas>标签，如
<!DOCTYPE HTML>
<html>
<head>
<title>Look what I Drew</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="draw" width="600" height="200"></canvas>
</body>
</html>
width属性定义它在web页面中水平方向所占的像素，Height定义了它在web页面中垂直方向所占元素。
注意：上面的web页面无法显示画布的，除非你在画布上绘制了内容。
需要在<canvas>上调用getContext（），并提供一个‘2d’参数
画布的一些图形API
绘制矩形
1. CanvasRenderingContext2D.clearRect()
设置指定矩形区域内（以点（x，y）为起点，范围是（width，height）所有像素变成透明，并擦除之前绘制的所有内容）；
2.CanvasRenderingContext2D.fillRect() 绘制带填充色的矩形
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
3.CanvasRenderingContext2D.strokeRect() 可以绘制有颜色边框的矩形
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);
4. CanRenderingContext2D.rect() 绘制矩形
使用fill（）或者 stroke（）方法填充或者描边
fillRect
strokeRect
绘制圆形
CanvasRenderingContext2D.arc()
void ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);
最后一个参数是可选Boolean值，如果为true，则逆时针绘制圆弧；
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI，false);
ctx.stroke();
绘制线
- beginPath方法告诉画布开始一个新路径
*moveTo 方法把画笔移到画布上的指定点
*line To 方法描绘路径，从画笔的当前位置描绘到画布上的另一个点
*closePath 方法将路径的起始点连接到当前路径的最后一个点
//绘制线
var canvas = document.getElementById("canvas");
var ctx = convas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "cyan";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();
绘制图片
void*ctx*.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
parameter
