什么是Canvas
HTML5的canvas元素使用JavaScript在网页上绘制图像。
画布（canvas）是一个矩形区域，可以控制其每一像素
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
如何创建Canvas元素
向HTML5页面添加canvas元素，规定元素的id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
如何进行绘制工作
canvas元素本身没有绘图能力，所有的绘制工作必须在JavaScript内部完成
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
JavaScript使用id来寻找canvas元素
var c=document.getElementById("myCanvas");
然后，创建context对象：
var cxt=c.getContext("2d");
stroke()方法会实际地绘制出通过moveTo()和lineTo方法定义的路径，默认是黑色
stroke()
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(20,20);
ctx.lineTo(20,40);
ctx.lineTo(40,40);
ctx.lineTo(40,60);
ctx.lineTo(60,80);
ctx.lineTo(80,100);
ctx.lineTo(100,100);
ctx.lineTo(100,10);
ctx.lineTo(10,10);
// 通过strokeStyle属性填充另一种颜色/渐变
ctx.strokeStyle="green"
ctx.stroke();
beginPath()方法开始一条路径,或重置当前的路径
beginPath()
var c2 = document.getElementById("mycanvas2");
var ctx2 = c2.getContext("2d");
ctx2.beginPath();
ctx2.lineWidth="8";
ctx2.strokeStyle="red"//红色路径
ctx2.moveTo(10,75);
ctx2.lineTo(255,70);
ctx2.stroke();//进行绘制
ctx2.beginPath();
ctx2.strokeStyle="blue"//蓝色路径
ctx2.moveTo(50,10);
ctx2.lineTo(150,130);
ctx2.stroke();//进行绘制
ctx2.beginPath();
ctx2.strokeStyle="green"//绿色路径
ctx2.moveTo(200,10);
ctx2.lineTo(20,130);
ctx2.stroke();//进行绘制
colsePath()方法创建从当前点到开始点的路径(连接当前点到开始点)
closePath()
var c3 = document.getElementById("mycanvas3");
var ctx3 = c3.getContext("2d");
ctx3.beginPath();
ctx3.moveTo(20,20);
ctx3.lineTo(20,120);
ctx3.lineTo(70,120);
ctx3.closePath();
ctx3.stroke();
clip() 方法从原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
clip()
var c4=document.getElementById("mycanvas4");
var ctx4=c4.getContext("2d");
// 剪切矩形区域
ctx4.rect(50,20,200,120);
ctx4.stroke();
ctx4.clip();
// 在 clip() 之后绘制绿色矩形
ctx4.fillStyle="green";
ctx4.fillRect(0,0,160,110);
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
quadraticCurveTo()
var c5 = document.getElementById("mycanvas5");
var ctx5 = c5.getContext("2d");
ctx5.beginPath();
ctx5.moveTo(20,20);
//context.quadraticCurveTo(cpx,cpy,x,y);
ctx5.quadraticCurveTo(180,100,200,20);
ctx5.lineWidth="5"
ctx5.strokeStyle="purple"
ctx5.stroke();
ctx5.beginPath();
ctx5.moveTo(20,40);
ctx5.quadraticCurveTo(20,180,200,120);
ctx5.strokeStyle="#000"
ctx5.stroke();
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。拥有两个控制点
bezierCurveTo()
var c6 = document.getElementById("mycanvas6");
var ctx6 = c6.getContext("2d");
ctx6.beginPath();
//bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
ctx6.moveTo(20,20);
ctx6.bezierCurveTo(20,100,200,100,200,20);
ctx6.stroke();
ctx6.beginPath();
ctx6.moveTo(20,40);
ctx6.bezierCurveTo(20,160,280,160,280,40);
ctx6.strokeStyle="red"
ctx6.stroke();
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
arc()
var c7 = document.getElementById("mycanvas7");
var ctx7 = c7.getContext("2d");
ctx7.beginPath();
//context.arc(x,y,r,sAngle,eAngle,counterclockwise);
/*
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
*/
ctx7.arc(100,75,50,0,2*Math.PI);
ctx7.stroke();
ctx7.beginPath();
ctx7.arc(200,80,70,0,1.5*Math.PI);
ctx7.strokeStyle="red"
ctx7.stroke();
ctx7.beginPath();
ctx7.arc(150,50,50,0,1*Math.PI,false);
ctx7.strokeStyle="green"
ctx7.stroke();
ctx7.beginPath();
ctx7.arc(100,50,50,0,1*Math.PI,true);
ctx7.strokeStyle="blue"
ctx7.stroke();
arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。
arcTo()
var c8 = document.getElementById("mycanvas8");
var ctx8 = c8.getContext("2d");
ctx8.beginPath();。
ctx8.moveTo(20,20); // 创建开始点
ctx8.lineTo(100,20); // 创建水平线
ctx8.arcTo(150,20,150,70,50); // 创建弧
ctx8.lineTo(150,120); // 创建垂直线
ctx8.stroke(); // 进行绘制
context.isPointInPath(测试的x坐标,测试的y坐标);
isPointInPath()
var c9 = document.getElementById("mycanvas9");
var ctx9 = c9.getContext("2d");
ctx9.beginPath();
ctx9.rect(20,20,150,150);
//如下，测试坐标 (10,10) ,不在当前路径中，所以返回false。所以渲染为绿色
if (ctx9.isPointInPath(10,10)) {
ctx9.fillStyle = "red"
}else{
ctx9.fillStyle = "green"
}
ctx9.fill();