Canvas篇

Canvas API 提供了一個通過JavaScript 和 HTML的元素來繪製圖形的方式。
可用於動畫、遊戲畫面、數據可視化、圖片編輯以及實時視頻處理等方面。

Canvas 的默認大小爲300像素×150像素（寬×高，像素的單位是px）
<canvas> 看起來和 <img> 元素很相像，唯一的不同就是它並沒有 src 和 alt 屬性。實際上，<canvas> 標籤只有兩個自帶屬性— width和height。

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the &lt;canvas&gt; 
</canvas>

clearRect(x, y, width, height)

注：toDataURL第二個參數 可用於圖片像素壓縮

canvas.toDataURL(type, encoderOptions)

 1. type 可選
 圖片格式，默認爲 image/png
 2. encoderOptions 可選
 在指定圖片格式爲 image/jpeg或image/webp的情況下，可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值範圍，將會使用默認值0.92。其他參數會被忽略。

注：drawImage改變原有圖片寬高 可用於圖片壓縮

ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

1.sx可選
  需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的左上角 X 軸座標。
2.sy可選
  需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的左上角 Y 軸座標。
3.sWidth可選
  需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的寬度。如果不說明，整個矩形（裁剪）從座標的sx和sy開始，到image的右下角結束。
4.sHeight可選
需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的高度。
5.dx
  image的左上角在目標canvas上 X 軸座標。
6.dy
  image的左上角在目標canvas上 Y 軸座標。
7.dWidth可選
  image在目標canvas上繪製的寬度。 允許對繪製的image進行縮放。 如果不說明， 在繪製時image寬度不會縮放。
8.dHeight可選
  image在目標canvas上繪製的高度。 允許對繪製的image進行縮放。 如果不說明， 在繪製時image高度不會縮放。

<canvas> 元素有一個叫做 getContext()的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數。

示例1：將圖像文件轉換爲base64字符串

var image = new Image()
image.src = url // 此處url爲要轉base64的圖片地址
let data = '' // 用於存儲最終轉碼過的圖片

// onload爲當前圖片加載完成之後在對其渲染
image.onload = () => {
	var canvas = document.createElement('canvas') // 創建一個canvas元素
	var cxt = canvas.getContext('2d') // context相當於畫筆，裏面有各種可以進行繪圖的API

	// 此處可以改變圖片寬高來達到壓縮圖片的效果（例如：image.width/2；image.height/2）
   canvas.width = image.width
   canvas.height = image.height

   cxt.clearRect(0, 0,  image.width, image.height）
   cxt.drawImage(image, 0, 0)
   
   // toDataURL第二個參數值越小，所繪製出的圖像越模糊
   data = canvas.toDataURL('image/*', 0.7)
}

示例2：繪製三角形

function draw() {
  var canvas = document.getElementById('tutorial')
  // 使用canvas.getContext來判斷當前瀏覽器是否支持Canvas
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d')

    ctx.beginPath()
    ctx.moveTo(75, 50)
    ctx.lineTo(100, 75)
    ctx.lineTo(100, 25)
    ctx.fill()
  }
}

// 使用方法
<body onload="draw();">
	<canvas id="tutorial" width="150" height="150"></canvas>
</body>