1：基本概念

Canvas是HTML5的一個新特性，canvas又叫做畫板。顧名思義，我們可以在canvas上繪制我們需要的圖形。最開始，canvas它是由蘋果公司提出的，當(dāng)時不叫canvas，叫widget，因為HTML并不存在一套二維的繪圖API。Canvas本身是一個HTML元素，需要HTML元素的配合高度和寬度屬性而定義出的一塊可繪制區(qū)域，定義區(qū)域之后使用JavaScript的腳本繪制圖像的HTML元素。

它可以基本的繪制圖形，進(jìn)一步的制作照片，繪制動畫，更進(jìn)一步可以處理和渲染視頻。（應(yīng)用場景）

2：瀏覽器兼容

browserCanvas.png

3：<canvas>是一個元素

canvas有兩個屬性，一個是寬度（width），一個是高度（height）。寬度和高度可以使用內(nèi)聯(lián)的屬性，如下所示：

<canvas width="300px" height="150px" id="canvas">
 您的瀏覽器不支持Canvas
 <img src="./backup.jpg" alt=""> 
</canvas>

4：坐標(biāo)系統(tǒng)

axios.png

5：準(zhǔn)備畫布，Rending Context(渲染上下文 - 畫筆)

const canvas = document.getElementById('canvas');
/* 獲得 2d 上下文對象 */
const ctx = canvas.getContext('2d');

6：繪制畫布

原生繪制API

原生繪圖API有三個：

• fillRect(x, y, width, height) 　　　　填充矩形

• strokeRect(x, y, width, height) 　　矩形邊框

• clearRect(x, y, widh, height) 　　　清空

  ctx.fillRect(0, 0, 50, 50);
  ctx.strokeRect(50, 50, 100, 100);
  ctx.clearRect(10, 10, 30, 30);</pre>

繪制線段 - Path

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.closePath();
?
ctx.stroke();

繪制三角形 - Path

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fill();

繪制圓/圓弧- Path

• arc(x, y, radius, startAngle, endAngle, anticlockwise)

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ?
    ctx.arc(150, 75, 50, 0, Math.PI / 2, false);
    ?
    ctx.stroke();

• arcTo(x1, y1, x2, y2, radius)

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ?
    ctx.arcTo(100, 100, 400, 100, 400);
    ?
    ctx.stroke();

貝塞爾曲線 - Path

• cubic-bezier(n1,n2,n3,n4)

  p0(0,0)

  p1(1,1)

  p2(n1,n2)

  p3(n3,n4)

ctx.beginPath();
ctx.bezierCurveTo(0, 123, 100, -9, 100, 100);
ctx.stroke();