HTML5 canvas
基本知识
context是一个封装了很多绘图功能的对象，获取这个对象的方法是
var context =canvas.getContext("2d");
canvas元素绘制图像的时候有两种方法，分别是
context.fill()//填充
context.stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度
颜色的表示方式:
直接用颜色名称:"red" "green" "blue"
十六进制颜色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候你就懂了，现在暂时不用关系）
y:矩形起点纵坐标
width:矩形长度
height:矩形高度
//填充背景
function drawFill(){
context.fillStyle = "red";
context.fillRect(0, 120, 100, 100);
}
//填充边框
function drawStroke(){
context.strokeStyle = "blue";
context.strokeRect(120, 120, 100, 100);
}
清除矩形区域 context.clearRect(x,y,width,height)
x:清除矩形起点横坐标
y:清除矩形起点纵坐标
width:清除矩形长度
height:清除矩形高度
//填充背景
function drawFill(){
context.fillStyle = "red";
context.fillRect(0, 0, 100, 100);
}//填充边框
function drawStroke(){
context.strokeStyle = "blue";
context.strokeRect(0, 120, 100, 100);
}
//清除画布
function clearCanvas(){
context.clearRect(50,50,50,170);
}
圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
x:圆心的x坐标
y:圆心的y坐标
straAngle:开始角度
endAngle:结束角度
anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针
ps：经过试验证明书本上ture是顺时针，false是逆时针是错误的，而且无论是逆时针还是顺时针，角度都沿着顺时针扩大，如下图：
路径 context.beginPath() context.closePath()
*号为重点
1、系统默认在绘制第一个路径的开始点为beginPath
*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
如果没有closePath那么前面的路径会保留，实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留
绘制线段 context.moveTo(x,y) context.lineTo(x,y)
x:x坐标
y:y坐标
每次画线都从moveTo的点到lineTo的点，
如果没有moveTo那么第一次lineTo的效果和moveTo一样，
每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点
function draw1(){
context.fillStyle="red";
context.beginPath();
context.moveTo(150,50);
context.lineTo(100,100);
context.lineTo(200,100);
context.closePath();
context.fill();
}
function draw2(){
context.fillStyle="blue";
context.beginPath();
context.moveTo(120,100);
context.lineTo(80,140);
context.lineTo(220,140);
context.lineTo(180,100);
context.closePath();
context.fill();
}
绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标
qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标
qy:二次样条曲线终点y坐标
function way(){
context.strokeStyle="blue"
context.beginPath()
context.moveTo(700,0)
context.lineTo(800,0)
context.bezierCurveTo(470,170,750,380,350,550)
context.lineTo(250,500)
context.bezierCurveTo(650,380,370,170,700,0)
context.stroke();
}
