什么是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"http://紅色路徑
    ctx2.moveTo(10,75);
    ctx2.lineTo(255,70);
    ctx2.stroke();//進行繪制
    ctx2.beginPath();
    ctx2.strokeStyle="blue"http://藍色路徑
    ctx2.moveTo(50,10);
    ctx2.lineTo(150,130);
    ctx2.stroke();//進行繪制
    ctx2.beginPath();
    ctx2.strokeStyle="green"http://綠色路徑
    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();