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:矩形起点纵坐标

矩形长度

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:清除矩形起点纵坐标

清除矩形长度

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();

    }