我的家園

lineTo 的使用示例

        示例（如右圖）畫的是兩個三角形，一個實色填充，一個勾邊。首先調用 beginPath 方法創建一個新路徑，然后用moveTo 方法將起始坐標移至想要的位置，然后畫兩條直線來構成三角形的兩條邊。

        可以注意到 fill 和 strok 繪三角形的區別，使用 fill 路徑會自動閉合，但使用 stroke 不會，如果不關閉路徑，勾畫出來的只有兩邊。

//填充三角形
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();

// 勾邊三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke(); 
   

arc 的使用示例

        這個示例比之前見到過的要復雜一些，畫了12個不同的弧形，有不同夾角和填充狀態的。如果我用上面畫笑臉的方式來畫這些弧形，那會是一大段的代碼，而且，畫每一個弧形時我都需要知道其圓心位置。像我這里畫 90，180 和 270 度的弧形看起來不是很麻煩，但是如果圖形更復雜一些,則實現起來會越來越困難。

        這里使用兩個 for 循環來畫多行多列的弧形。每一個弧形都用 beginPath 方法創建一個新路徑。然后為了方便閱讀和理解，我把所有參數都寫成變量形式。顯而易見，x 和 y 作為圓心坐標。 radius 和 startAngle 都是固定，endAngle 從 180 度半圓開始，以 90 度方式遞增至圓。anticlockwise 則取決于奇偶行數。

    for (i=0;i<4;i++){
    for(j=0;j<3;j++){    //chinese_xu 原始代碼
    ctx.beginPath();
    var x              = 25+j*50;               // x coordinate
    var y              = 25+i*50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI+(Math.PI*j)/2;  // End point on circle ---//修復錯誤標點
    var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

    if (i>1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
//chinese_xu 原始代碼并沒有按照1/4圓遞增來畫。

//修改后輸出4行4列，要把畫布擴大到200*200觀看
for (i=0;i<4;i++){
   for(j=0;j<4;j++){    
    ctx.beginPath();
    var x              = 25+j*50;               // x coordinate
    var y              = 25+i*50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI*(2-j/2);   // End point on circle
    var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

    if (i>1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
     

quadraticCurveTo 的使用示例

// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

        通過計算，可以由二次曲線的單個控制點得出相應三次方曲線的兩個控制點，因此二次方轉三次方是可能的，但是反之不然。僅當三次方程中的三次項為零是才可能轉換為二次的貝塞爾曲線。通常地可以用多條二次方曲線通過細分算法來近似模擬三次方貝塞爾曲線。

bezierCurveTo 的使用示例

			// Bezier curves example
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();