Canvas 的簡單介紹

1：基本概念

Canvas是HTML5的一個新特性，canvas又叫作畫板。顧名思義，咱們能夠在canvas上繪製咱們須要的圖形。最開始，canvas它是由蘋果公司提出的，當時不叫canvas，叫widget，由於HTML並不存在一套二維的繪圖API。Canvas自己是一個HTML元素，須要HTML元素的配合高度和寬度屬性而定義出的一塊可繪製區域，定義區域以後使用JavaScript的腳本繪製圖像的HTML元素。

它能夠基本的繪製圖形，進一步的製做照片，繪製動畫，更進一步能夠處理和渲染視頻。（應用場景）

2：瀏覽器兼容

3：<canvas>是一個元素

canvas有兩個屬性，一個是寬度（width），一個是高度（height）。寬度和高度能夠使用內聯的屬性，以下所示：

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

4：座標系統

5：準備畫布，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);

繪製線段 - 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();