Canvas小结（canvas路径）

什么是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();