豐富Canvas的應用

這篇文章主要介紹了多媒體樣式，Canvas填充、文本以及圖片等多媒體樣式應用, 結合狀態保存與恢復介紹了Canvas如何繪製多彩的內容。

1：添加樣式

主要有填充樣式（fillStyle），輪廓的樣式（strokeStyle），而後還有一個透明度（transparency）和線條樣式（line style）。它們有一個共同的屬性是設置以後都會成爲默認屬性。

填充樣式

• 填充（fillStyle），填充最基本的就是使用CSS的顏色值。

  ctx.fillStyle = '#329FD9';
   ctx.fillRect(0, 0, 400, 100);

• 除此以外，還能夠添加漸變對象（Gradient），漸變在css裏面主要分爲兩種，一種是線性漸變，一種是徑向漸變。在canvas裏面也有這兩種的漸變方式的添加：createLinearGradient 和 createRadialGradient。 1.createLinearGradient

  //建立線性漸變對象，接收四個參數，能夠理解爲兩個座標點（0, 300）和（400, 0）
      const linearGradient = ctx.createLinearGradient(0, 300, 400, 0);
      //添加漸變顏色 addColorStop，接收兩個參數，第一個數值範圍在0-1之間，第二個是顏色值
      linearGradient.addColorStop(0, "#8A469B");
      linearGradient.addColorStop(0.5, "#FFFFFF");
      linearGradient.addColorStop(1, "#EA7F26");
      ctx.fillStyle = linearGradient;
  
      ctx.fillRect(0, 100, 400, 100);

  2.createRadialGradient

  關於canvas的徑向漸變，咱們能夠理解爲，有兩個小圓，做兩個圓的切線，讓二者有一個交點，若是兩圓重合了，那麼獲得的就是一個向上的漏斗，咱們能夠理解爲的範圍就是無限大的，或者說在整個區域內都是咱們能夠見到的範圍。若是兩圓分開，看到的漸變範圍就是一個錐形。兩圓重合就是無限大的，兩個圓心的連線就是漸變的範圍。

  /* 徑向漸變 - 同心圓 */
      //建立徑向漸變對象，接收六個參數，如上圖，左邊藍色是一個圓，有一個圓心一個半徑，200,250,10分別對應左邊圓的圓心位置和圓半徑；一樣的右邊綠色的圓對應的就是後面三個參數的圓的位置。
      	const radialGradient1 = ctx.createRadialGradient(200, 250, 10, 200, 250, 60);
      	radialGradient1.addColorStop(0, "#8A469B");
      	radialGradient1.addColorStop(1, "#EA7F26");
      	ctx.fillStyle = radialGradient1;
  
      	ctx.fillRect(0, 200, 400, 100);
  
  
       /* 徑向漸變 - 非同心圓 */
          const radialGradient2 = ctx.createRadialGradient(60, 350, 10, 350, 350, 60);
          radialGradient2.addColorStop(0, "#8A469B");
          radialGradient2.addColorStop(1, "#EA7F26");
          ctx.fillStyle = radialGradient2;
  
          ctx.fillRect(0, 300, 400, 100);

• 圖案（視頻）對象（pattern）

  ctx.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");
      const img = new Image();
      img.src = "./backup.png";
      img.onload = () => {
          const pattern = ctx.createPattern(img, 'repeat');
          ctx.fillStyle = pattern;
          ctx.fillRect(0, 400, 400, 100);
      }

• 設置以後成爲默認屬性

輪廓的樣式（strokeStyle）

同 fillStyle 用法同樣，只不過strokeStyle變成了邊框。一樣能夠添加如下屬性：

• 顏色
• 漸變對象
• 圖案(視頻)對象
• 設置以後成爲默認屬性

透明度（transparency）

ctx.globalAlpha = 0.1;

線條樣式

• 線條寬度（lineWidth）

  ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo(10, 10);
    ctx.lineTo(50, 50);
    ctx.closePath();
    ctx.stroke();

• 線條端點樣式（lineCap），主要分爲三種：butt（平直的邊緣，默認值）、round（圓形線帽，半徑是寬度一半）、square（正方形線帽，線帽的高度是當前lineWidth的一半）。

  ctx.beginPath();
    ctx.moveTo(20, 150);
    ctx.lineTo(20, 250);
    ctx.lineWidth = 20;
    ctx.lineCap = 'round';
    ctx.stroke();

• 線條鏈接處端樣式（lineJoin），產生線條鏈接的條件是要在同一path下面，並且線條的端點要重合。它一個有三種：miter（默認值，尖角）、bevel（斜角）、round（圓角）。
• 畫虛線（兩種方法）
  1. 虛線樣式（setLineDash），接收兩個參數：[實線長度，間隙長度] 2.lineDashOffset，起始的偏移量

  ctx.lineWidth = 1;
    ctx.setLineDash([45, 5]);
    ctx.lineDashOffset = -5;
    ctx.strokeRect(10, 450, 500, 100);

2：繪製文本

在canvas中繪製文本一共有6個屬性：font、textAlign、textBaseline、direction、fillText 和 strokeText。

font（文本樣式）

• font-style
• font-variant
• font-weight
• font-size
• font-family
• ...

textAlign（文字的排列方向）

• start - 默認
• end
• left
• right
• center

textBaseline（基線）

• top
• hanging
• middle
• alphabetic - 默認
• ideographic
• bottom

direction（方向）

• ltr（文字的正向和反向）
• rtl
• inherit - 默認

fillText

• fillText(text, x, y [, maxWidth])

strokeText

• strokeText(text, x, y [, maxWidth])

3：繪製圖片

• 基本用法

  const img = new Image();
      img.src = "./backup.png";
      img.onload = () => {
          const pattern = ctx.createPattern(img, 'repeat');
          ctx.fillStyle = pattern;
  
          ctx.fillRect(0, 400, 400, 100);
      }

• 繪製img元素圖片

  const img = document.getElementById('image');

• 圖片縮放

  const img2 = new Image();
     img2.src = "./backup.png";
     img2.onload = () => {
         const pattern = ctx.createPattern(img2, 'repeat');
         // ctx.fillStyle = pattern;
  
         ctx.drawImage(img2, 0, 200, 100, 100)
     }

• 圖片切片

  const img3 = new Image();
    img3.src = "./backup.jpg";
    img3.onload = () => {
        const pattern = ctx.createPattern(img3, 'repeat');
        ctx.fillStyle = pattern;
  
        ctx.drawImage(img3, 0, 0, 640, 480);
        // 320, 240：第一張圖片的截取範圍  640, 480：第一張圖片的截取位置  0, 0：截取後位置歸於左上角
        640, 480：截取後的寬度和高度
        ctx.drawImage(img3, 320, 240, 640, 480, 0, 0, 640, 480);
    }

4：狀態保存

• save - 狀態存儲在棧中
• restore - 棧中彈出恢復狀態
• toDataURL(type, encoderOptions) - 保存爲圖片
  • type - 默認image/png
  • encoderOptions圖片質量 - image/jpeg/webp - 0 - 1