Canvas簡介

做者：較瘦@毛豆前端

1. cavans是什麼

咱們都知道HTML5新增了canvas元素，是HTML5的核心技術之一。canvas又被稱爲畫布，咱們能夠使用canvas元素結合javascript來繪製各類圖形，製做動畫效果等

2. 基本用法

使用canvas元素繪製圖形，須要如下三步

（1）獲取canvas對象

（2）獲取上下文對象context

（3）繪製圖形

1. 繪製矩形

   <template>
   <div>
         <canvas id="canvas" width='1200' height="1000"></canvas>
   </div>
   </template>
   複製代碼

   // 矩形相關
   // 獲取canvas對象
   let canvas = document.getElementById('canvas'); 
   // 獲取上下文對象 context
   let context = canvas.getContext('2d');
   // 繪製矩形
   context.fillStyle = 'black'
   context.strokeStyle = 'blue'
   context.fillRect(0,0,100,100) //實心矩形 起始點的x座標， 起始點的y座標，矩形的寬，矩形的搞
   context.strokeRect(120, 0, 100, 100);// 空心矩形
   
   複製代碼

說明：fillStyle 是context對象的一個屬性，有三種取值（顏色值、漸變色、圖案）

注意：對於canvas的寬度和高度，必定不要在css樣式中定義，而是在html屬性中定義（在css樣式中定義，咱們使用canvas對象獲取的寬度和高度是默認值而不是實際的寬度和高度）。 另外：strokeStyle( fillStyle)屬性的設置必須在strokeRect()或者fillRect()方法以前定義，不然屬性設置無效

2. 繪製線條

   在canvas中，咱們能夠使用moveTo(x, y)和lineTo(x, y)這兩個方法配合使用來畫直線

   用法以下：

   //繪製線條
   context.strokeStyle = 'green'; // 畫筆顏色
   context.moveTo(300,300); // 起點座標
   context.lineTo(500, 500); // 終點座標
   context.stroke(); // 繪製
   複製代碼

   注意：canvas中使用的座標系是W3C座標系（y軸正方向是向下的）。若是要繪製多條線條：lineTo()這個放個是能夠重複使用的，第一次lineTo()後，畫筆將自動移動到終點座標位置，第二次lineTo() 會以 「上一個終點座標」 做爲第二次調用的起點座標，咱們也能夠藉此畫三角形、箭頭等多邊形

3. 繪製圓形

   咱們能夠使用arc(x, y, 半徑, 開始角度, 結束角度, anticlockwise)方法來畫一個圓

   // 畫圓 在canvas中，繪製圓形或者圓弧時用到的是弧度
   context.beginPath();
   context.fillStyle = 'rgba(0,255,0,0.25)';
   context.arc(200, 220, 100, 0, Math.PI* 2, true);
   context.closePath();
   context.fill()
   複製代碼

   說明：繪製圓形時須要調用beginPath()方法來聲明開始，使用arc() 方法畫圓完成後，還須要調用closePath() 來關閉當前路徑，兩者通常是配合使用的。

   arc() 方法參數說明：

   （1）x 、y 分別表示圓心橫座標和縱座標

   （2）開始角度和結束角度都是以弧度爲單位。例如：180度 就是 Math.PI

   （3）anticlockwise 是一個布爾值，當爲true時表示按逆時針繪製，爲false時表示按順時針方向繪製

4. 清空畫布

   在canvas中，咱們能夠使用clearRect(x, y, width, height) 方法來清空 」指定矩形區域「

   // 清除矩形區域
   context.clearRect(50,50,120,120)
   
   複製代碼

   說明：x和y 分別表示清空矩形區域最左上角的座標， width表示矩形的寬度、height表示矩形的高度。

   若是要清空整個canvas，則width 和  height分別爲 canvas畫布的寬度和高度

3. 圖片操做

canvas不只能夠繪製各類形狀的圖形，還能夠將圖片導入canvas中進行各類操做。例如：平鋪、切割、像素處理等

1. 繪製圖片

   咱們能夠使用drawImage(image, dx, dy, dw, dh) 方法來繪製圖片。

   參數說明：image：表示頁面中的圖片

   ​ dx：表示圖片左上角的橫座標

   ​ dy：表示圖片左上角的縱座標

   ​ dw：表示圖片的寬度

   ​ dh：表示圖片的高度

   // 畫圓 在canvas中，繪製圓形或者圓弧時用到的是弧度
   context.beginPath();
   context.fillStyle = 'rgba(0,255,0,0.25)';
   context.arc(200, 220, 100, 0, Math.PI* 2, true);
   context.closePath();
   context.fill()
   // 使用clip()方法，使得切割區域爲上面繪製的圓形
   context.clip()
   let image = new Image();
   image.src = ImgSrc
   image.onload = function () {
         console.log('>>>>>>>>')
         context.drawImage(image, 0, 100)
   }
   複製代碼

   注意：必須在圖片載入完成後才能將圖片繪製到canvas上，若是圖片沒有載入完成就使用drawImage() 方法進行繪製的話，canvas將不會顯示圖片

2. 切割圖片

   在canvas中，咱們能夠利用clip() 方法來切割繪製的圖片

   使用方法：

   1. 繪製基本圖形

   2. 使用clip() 方法

   3. 繪製圖片

      咱們能夠使用矩形、多邊形、圓形等做爲切割區域來切割圖片

   本次主要介紹canvas的基礎部分，canvas還有不少高階應用。例如：邊界檢測、高級動畫、canvas圖表庫..... 後續學習會繼續分享給你們