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

    }