前端培訓-中級階段（26）- Canvas 繪圖（2019-11-21期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

canvas 是 HTML5 新增長的功能，用於操做繪製圖片。
能夠用於動畫、遊戲畫面、數據可視化、圖片編輯以及實時視頻處理等方面。
主要操做2D圖形。也能夠繪製3D圖形。

canvas 實戰

1. 刮刮卡。刮刮卡效果實現、demo

   1. globalCompositeOperation、drawImage、節點記錄自動化
   2. ctx.globalCompositeOperation = 'destination-out'

2. 國慶頭像。蹭熱點，請給我一面國旗@微信官方、demo

   1. tranform、canvas、drawImage、toDataURL

canvas 標籤

<canvas id="canvas" width="300" height="300"></canvas>

1. 操做須要使用DOM，因此通常給一個ID來方便查找
2. height 爲畫布真實高度。單位：px。默認高度 150px。
3. width 爲畫布真實寬度。單位：px。默認寬度 300px。
4. 標籤上的屬性爲畫布寬高，css設置寬高爲展現寬高。意義是不一樣的。
5. HTMLCanvasElement 爲 canvas 標籤的 DOM 對象。

canvas 屬性

1. height 對應標籤上的 height 屬性
2. width 對應標籤上的 width 屬性

canvas 方法

ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 300, 300)

1. getContext() 返回繪製上下文環境對象。咱們須要使用返回的對象操做圖形。
2. toBlob() 將圖片輸出爲Blob類型、異步
3. toDataURL() 將圖片輸出爲DataURL類型、同步

canvas.getContext(contextType[, contextAttributes])

ctx = canvas.getContext(contextType[, contextAttributes])

1. contextType 須要返回的對象類型

   1. '2d' 返回 CanvasRenderingContext2D對象，用來進行2D繪製。
   2. 'webgl'或'experimental-webgl' 返回WebGLRenderingContext（WebGL渲染上下文）對象，用於使用 webgl 進行 3D繪製。提供硬件3D加速渲染。對應的WebGL1（OpenGL ES 2.0）
   3. 'webgl2' 返回 WebGL2RenderingContext 對象，也是用於3D繪製。只不過對應 WebGL2（OpenGL ES 3.0）
   4. 'bitmaprenderer' 返回 ImageBitmapRenderingContext

2. contextAttributes 可選

   1. alpha 開啓透明

canvas.toBlob(callback, mimeType, quality);

該操做是異步的，因此須要傳入callback。

1. callback 處理完成的回調函數。回調的第一個參數爲blob。
2. mimeType 須要轉換的圖片類型，默認爲image/png。
3. quality 圖片質量，默認爲0.92。

canvas.toDataURL(mimeType, quality);

該操做是同步的，因此大圖片會卡。
data:[<mime type>][;base64],<data> DataURL的格式。

1. mimeType 須要轉換的圖片類型，默認爲image/png。
2. quality 圖片質量，默認爲0.92。

跨域問題

1. 圖片服務器須要配置Access-Control-Allow-Origin

2. 設置圖片的crossOrigin

   var img = new Image();
    img.crossOrigin = '';
    img.onload = function () {};
    img.src = url;

CanvasRenderingContext2D

線條樣式

測試地址

1. ctx.lineWidth 寬度。默認值：1，能夠有小數。單位：px

2. ctx.lineCap 端點樣式，路徑起點和終點

   1. butt 默認值，嚴格按照座標點繪製。
   2. round 圓形，端點處lineWidth爲直徑畫圓。
   3. square 方形，線的端點多出一個方塊，lineWidth 是同樣，長度度是 lineWidth/2。

3. ctx.lineJoin 轉角樣式，路徑中的轉折點

   1. miter 尖角，默認值。若是夾角比較小，則尖頭會很是長。miterLimit能夠限制尖頭最長尺寸，長度大於限制值的會使用bevel來處理。
   2. round 圓角，轉折點處lineWidth爲直徑畫圓。
   3. bevel 平角，轉折點直接截斷。
4. ctx.miterLimit 尖角限制閾值，針對線條粗角度小的狀況。默認值：10。若是ctx.lineJoin=miter時，長度超出則使用平角顯示，若是長度不超出使用尖角顯示。
5. ctx.lineDashOffset 虛線起始偏移量

6. ctx.setLineDash() 設置虛線數值，數組。

   1. [5]等價於[5,5]。
   2. [5,5]等價於實線5px虛線5px
   3. [1,2,3]等價於[實線1px,虛線2px,實線3px]
   4. [1,2,3,4]等價於[實線1px,虛線2px,實線3px,虛線4px]
   5. 以此類推
7. ctx.getLineDash() 獲取虛線數值，數組。

文本樣式

1. font 字號、字體。

   1. ctx.font='20px monospace'

2. textAlign 水平對齊方式。start（默認值）、end、left、right、center。 測試地址

   1. start 表示指定的座標爲開始座標（左邊、direction 時會自動變化）。
   2. end 表示指定的座標爲結束座標（右邊、direction 時會自動變化）。
   3. left 表示指定的座標爲左邊座標。
   4. right 表示指定的座標爲右邊座標。
   5. center 表示指定的座標爲中心點。

3. textBaseLine 基線對齊方式。top、hanging、middle、alphabetic（默認值）、ideographic、bottom。測試地址

   1. top 表示指定的座標爲文本頂點座標。
   2. hanging 藏文和其餘印度文字中使用
   3. middle 表示指定的座標爲文本垂直中心座標。
   4. alphabetic 表示指定的座標爲文本基線座標。
   5. ideographic 表示指定的座標爲文本底部座標。
   6. bottom 表示指定的座標爲文本底部座標。
4. direction 控制文本方向
   chrome中此特性默認是無效的。 經過 ExperimentalCanvasFeatures 特徵標識進行啓用。

填充繪製

1. ctx.fillStyle 填充顏色。默認爲#000黑色

2. ctx.fillRect() 填充指定區域

   1. ctx.fillRect(x, y, width, height);

3. ctx.fillText() 在指定區域繪製文本

   1. ctx.fillText(text, x, y [, maxWidth]);

4. ctx.fill() 填充，須要有路徑，會自動閉合路徑

   1. ctx.fill()、ctx.fill(fillRule)、ctx.fill(path, fillRule)
   2. fillRule 爲填充規則 nonzero、evenodd。搞懂SVG/Canvas中nonzero和evenodd填充規則 張鑫旭

描邊繪製

1. ctx.strokeStyle 描邊顏色。默認爲#000黑色

2. ctx.strokeRect() 描邊指定區域

   1. ctx.strokeRect(x, y, width, height);

3. ctx.strokeText() 在指定區域繪製文本描邊

   1. ctx.strokeText(text, x, y [, maxWidth]);

4. ctx.stroke() 描邊，須要有路徑，會自動閉合路徑

   1. ctx.fill()、ctx.fill(path)

陰影

1. ctx.shadowBlur 陰影模糊大小，默認值：0
2. ctx.shadowColor 陰影顏色，默認值：透明
3. ctx.shadowOffsetX 陰影X軸偏移量，默認值：0
4. ctx.shadowOffsetY 陰影Y軸偏移量，默認值：0

路徑

1. ctx.beginPath() 開啓一個新路徑
2. ctx.closePath() 關閉路徑繪製，區別在於描邊時。
   若是路徑沒有閉合，不關閉路徑繪製會出現自動閉合的狀況。
   若是路徑不閉合，可是關閉了路徑繪製，則不會出現自動閉合狀況。
3. ctx.moveTo() 移動路徑的起始點
   ctx.moveTo(x, y);
4. ctx.lineTo() 繪製直線路徑到指定點
   ctx.lineTo(x, y);
5. ctx.bezierCurveTo() 繪製貝塞爾曲線路徑到指定點
   ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
   當前點是起始點，參數是兩組控制點和一個結束點。測試地址
   
6. ctx.quadraticCurveTo() 繪製二次貝塞爾曲線路徑到指定點
   ctx.quadraticCurveTo(cpx, cpy, x, y);
   當前點是起始點，參數是一個控制點和一個結束點。測試地址
7. ctx.arc() 圓弧路徑
   ctx.arc(x, y, r, startAngle, endAngle [, anticlockwise]);對應 圓心、半徑、起始角度（弧度）、結束角度（弧度）、繪製方向（默認 false 順時針）
8. ctx.arcTo() 圓弧路徑
   不一樣於arc繪製一段路徑。這個更像是從當前點到目標點的繪製一個帶弧度的路徑
   ctx.arcTo(x1, y1, x2, y2, radius);
9. ctx.rect() 矩形路徑
   ctx.rect(x, y, width, height);
10. ctx.ellipse() 橢圓弧路徑
    ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
    記住是繪製橢圓弧路徑
11. ctx.clip() 裁剪路徑。規定路徑只能夠在這個區域內。
    ctx.clip();、ctx.clip(fillRule);、ctx.clip(path, fillRule);
    意思是以後的操做只在該路徑內操做。

變換

這裏就要說一下我以前的文章了(蹭熱點，請給我一面國旗@微信官方)，使用這個功能來實現css3變換以後，轉換到canvas上。測試地址
變化測試地址

1. ctx.rotate() 旋轉
   ctx.rotate(angle);，angle是弧度，angle = deg / 180 * Math.PI
   默認旋轉中心點是Canvas的左上角(0, 0)座標點。默認值是0。旋轉是指將當前的座標系旋轉，不會影響以前的繪製。css的則是總體旋轉。
2. ctx.scale() 縮放
   ctx.scale(x, y); 默認點是(0, 0)。默認值是(1, 1)。放大來說css和canvas是同樣的。不會影響以前的繪製。
3. ctx.translate() 位置
   ctx.translate(x, y); 默認點是(0, 0)。默認值是(0, 0)。使用來講和css的差距很大。不會進行座標軸疊加。用於修改中心點操做。
4. ctx.transform() 矩陣變化疊加

5. ctx.setTransform() 矩陣變化不疊加

   1. ctx.resetTransform() 重置矩陣變化
   2. ctx.getTransform() 獲取當前的矩陣變化值。

圖片繪製

1. ctx.createLinearGradient() 線性漸變
   ctx.createLinearGradient(x0, y0, x1, y1);
   能夠理解爲點1到點2是漸變。其他位置是原色。漸變繪製座標爲canvas座標，也就是說漸變其實已經繪製好，fill只是決定顯示那塊內容
2. ctx.createRadialGradient() 徑向漸變
   ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
   能夠理解爲圓0是點1純色，圓0到圓1之間是漸變色，圓1外是點2純色。漸變繪製座標爲canvas座標，也就是說漸變其實已經繪製好，fill只是決定顯示那塊內容
   
   測試地址

3. ctx.createPattern() 圖案
   ctx.createPattern(image, repetition);

   1. imgage 能夠爲 HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、CanvasRenderingContext2D、ImageBitmap、ImageData、Blob。
   2. repetition 能夠爲 repeat 默認 平鋪、repeat-x 水平平鋪、repeat-y 垂直平鋪、no-repeat 不重複。

4. ctx.drawImage() 繪製圖片到canvas上

   1. ctx.drawImage(image, dx, dy); 圖片從cavnas座標開始繪製。
   2. ctx.drawImage(image, dx, dy, dWidth, dHeight); 圖片從canvas座標開始繪製，繪製寬高。
   3. ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 圖片截取圖片的座標寬高，繪製到canvas的座標上。
5. ctx.createImageData() 建立一個圖片數據對象，四位描述一個像素點爲rgba。
6. ctx.getImageData() 獲取當前canvas的數據對象
7. ctx.putImageData() 將數據對象繪製到canvas上

雜項

1. ctx.clearRect() 清除指定區域內的全部內容

2. ctx.measureText() 測量文本所佔據的寬度

   1. ctx.measureText(text)
3. ctx.isPointInPath() 點是否在路徑內
   ctx.isPointInPath(x, y);
ctx.isPointInPath(x, y, fillRule);
ctx.isPointInPath(path, x, y);
ctx.isPointInPath(path, x, y, fillRule);
4. ctx.isPointInStroke() 點是否在路徑上
   ctx.isPointInStroke(x, y);
ctx.isPointInStroke(path, x, y);
5. ctx.save() 保存繪製狀態，入棧
6. ctx.restore() 恢復繪製狀態，出棧
7. ctx.canvas dom對象的引用
8. ctx.drawFocusIfNeeded()
9. ctx.scrollPathIntoView()

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. Canvas API中文文檔首頁地圖