HTML5之Canvas畫布

先上代碼：

<canvas width="1000" height="800">瀏覽器不支持HTML5！</canvas>

  <script type="text/javascript">
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext('2d');

        // 設置陰影
        context.shadowOffsetX = 5.0;
        context.shadowOffsetY = 5.0;
        context.shadowColor = "rgba(50%,50%,50%,0.75)";
        context.shadowBlur = 10.0;
        
        // 畫一個矩形圖形
        context.fillStyle = 'red';
        context.fillRect(2, 2, 300, 200);
        
        // 加邊框
        context.strokeRect(0, 0, 304, 204);
        
        // 畫一個矩形
        context.fillStyle = 'rgba(255,255,0,0.5)';
        context.fillRect(250, 150, 300, 200);

        // 清除指定區域
        context.clearRect(350, 200, 100, 100);
    </script>

- Rectangles 繪制矩形對象

- context.fillRect(x,y,w,h) // 繪制矩形
- context.strokeRect(x,y,w,h) // 繪制邊框
- context.clearRect(x,y,w,h) // 清除指定區域

- Colors 設置顏色

- 指定顏色（紅色）

指定方法 顏色值
-----------------------------
Hexa(十六進制) #FF0000
Hexa(short) #F00
RGB rgb(255,0,0)
RGB(percent) rgb(100%,0%,0%)
RGBA rgb(255,0,0,0.7)
RGBA(percent) rgba(100%,0%,0%,0.7)
HSL hsl(0,100%,50%)
HSLA hsla(0,100%,50%,1.0)
SVG(顏色名字) red

- shadow 陰影

  context.shadowOffsetX = 5.0;
  context.shadowOffsetY = 5.0;
  context.shadowColor = "rgba(50%,50%,50%,0.75)";
  context.shadowBlur = 10.0;

- Gradients 漸變

- 1.線性漸變

 // 起始位置截至位置
  var linGrad = context.createLinearGradient(0,450,1000,450);

  // 漸變中節點
  linGrad.addColorStop(0.0,'red');
  linGrad.addColorStop(0.5,'yellow');
  linGrad.addColorStop(0.7,'orange');
  linGrad.addColorStop(1.0,'purple');

  // 應用到圖形上
  context.fillStyle = linGrad;
  context.fillRect(0,450,1000,450);

- 2. 中心區域漸變

  // 6組數字，代表 2 個圓
  var radGrad = context.createRadialGradient(260,320,40,200,400,200);

  radGrad.addColorStop(0.0, 'yellow');
  radGrad.addColorStop(0.9, 'orange');
  radGrad.addColorStop(1.0, 'rgba(0,0,0,0)');

  context.fillStyle = radGrad;
  context.fillRect(0, 200, 400, 400);

- Paths 繪制路徑線條

- 繪制過程
1.開始繪制 beginPath()
2.定義所有節點
3.用stroke實現繪制

CreateLineA();          // 繪制一個 A 型
CreateQua();            // 繪制一條 拋物線
CreateBez();            // 繪制一條 貝塞爾曲線
CreateArc();            // 繪制一個 自定義曲線
CreateRoundedRect();    // 繪制一個 圓角圖形
CreateRect();           // 繪制一個 矩形

// 繪制一個 A 型
function CreateLineA() {
    context.fillStyle = 'red';
    context.strokeRect(0, 0, 300, 300); // 繪制邊框
    // 1. 開始繪制beginPath()
    context.beginPath();

    // 2. 定義所有節點
    context.moveTo(100, 200);   // 將筆移動到該坐標
    context.lineTo(150, 50);     // 繪制到指定坐標
    context.lineTo(200, 200);   // 再接着繪制到另一個坐標

    context.moveTo(100, 120);   // 再將筆移動到別的區域
    context.lineTo(200, 120);   // 再繪制一條線
    

    context.textAlign = 'left';                 // 設置水平對齊
    context.textBaseline = 'alphabetic';        // 設置垂直對齊
    context.font = 'bold 16px sans-serif';      // 設置輸出字體樣式
    context.fillText('(100/200)', 50, 220);     // 在指定坐標輸出文字
    context.fillText('(150/50)', 115, 30);
    context.fillText('(200/200)', 150, 220);
    context.fillText('(100/120)', 40, 100);
    context.fillText('(200/120)', 180, 100);

    // 3. 用stroke實現繪制
    context.stroke();
}

// 繪制一條拋物線
function CreateQua() {
    context.strokeRect(320, 0, 300, 300); // 繪制邊框

    context.beginPath();
    context.moveTo(350, 250);
    context.quadraticCurveTo(400, 50, 600, 50);
    context.stroke();
}

// 繪制一條貝塞爾曲線
function CreateBez() {
    context.strokeRect(640, 0, 300, 300); // 繪制邊框

    context.beginPath();
    context.moveTo(670, 250);
    context.bezierCurveTo(880, 300, 700, 30, 900, 50);
    context.stroke();
}

// 繪制一個 自定義曲線
function CreateArc() {
    context.strokeRect(0, 320, 300, 300); // 繪制邊框
    context.beginPath();
    context.moveTo(20, 430);
    context.arcTo(20, 370, 270, 370, 60);
    context.stroke();
}

//  繪制一個 圓角圖形
function CreateRoundedRect() {
    context.strokeRect(320, 320, 300, 300); // 繪制邊框

    x = 340;
    y = 370;
    w = 250;
    h = 200;
    r = 60;

    context.beginPath();
    context.moveTo(x, y + r);
    context.arcTo(x, y, x + w, y, r);
    context.arcTo(x + w, y, x + w, y + h, r);
    context.arcTo(x + w, y + h, x, y + h, r);
    context.arcTo(x, y + h, x, y, r);
    context.closePath();    // 閉合曲線
    context.stroke();
}

// 繪制一個矩形對象
function CreateRect() {
    context.strokeRect(640, 320, 300, 300); // 繪制邊框

    context.beginPath();
    context.rect(660,340,250,250); 
    context.stroke();
}