一、HTMLCanvasElement
canvas標簽對象，首先是Element對象支持節點通用操作
canvas屬性
width: canvas元素的寬度，繪制區域的寬度，單位像素，默認300px
height:canvas元素的高度，繪制區域的高度，單位像素，默認150px
canvas 尺寸和css 尺寸 的關系：
1. 視覺上而言css的width 屬性，權重要大於 canvas元素的width屬性權重
2.canvas 本質上就是一個圖片，很多樣式表現和 img 元素是一直的。 css 的寬度高度設置將影響頁面展示。
3. canvas 元素尺寸跟css 尺寸設置無關，Api中繪圖時候 僅關聯canvas的尺寸。
canvas方法：
1. getContext()
var context = canvas.getContext(contextType); var context = canvas.getContext(contextType, contextAttributes);
參數說明
contextTypeString
支持參數包括下面這些：
'2d'
會創建並返回一個CanvasRenderingContext2D對象，主要用來進行2d繪制，也就是二維繪制，平面繪制。
'webgl'或'experimental-webgl'
此參數可以返回一個WebGLRenderingContext（WebGL渲染上下文）對象，WebGL（全寫Web Graphics Library）是一種3D繪圖協議，可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型，無需安裝任何其他插件。此參數對應的WebGL版本1（OpenGL ES 2.0）。
'webgl2'
此參數可以返回一個WebGL2RenderingContext對象，可以用來繪制三維3D效果。此參數對應的WebGL版本2（OpenGL ES 3.0）。不過目前這個還處於試驗階段，我們實際Kaufman都是使用'webgl'這個參數。
'bitmaprenderer'
創建一個ImageBitmapRenderingContext（位圖渲染上下文），可以借助給定的ImageBitmap替換Canavs的內容。
contextAttributes（可選）Object
contextAttributes為一個純對象參數，下面是一個使用示意：
var gl = canvas.getContext('webgl', { antialias: false, depth: false });
該參數對象支持的屬性值具體如下：
如果contextType參數值是'2d'，則contextAttributes支持的標准屬性值為：
alphaBoolean
表示Canavs是否包含alpha透明通道，如果設置為false，則表示Canvas不支持全透明或者半透明，在繪制帶有透明效果的圖形或者圖像時候速度會更快一些。
如果contextType參數值是'webgl'，則contextAttributes支持的標准屬性值為：
alphaBoolean
表示Canavs是否包含透明緩沖區。
antialiasBoolean
表示是否需要抗邊緣鋸齒。如果設置為true，圖像呈現質量會好一些，但是速度會拖慢。
depthBoolean
表示繪制緩沖區的緩沖深度至少16位。
failIfMajorPerformanceCaveatBoolean
表示如果用戶的系統性能比較差，是否繼續常見繪制上下文。
powerPreferenceString
高速用戶使用的客戶端（如瀏覽器）我們現在這個WebGL上下文最合適的GPU配置是什么。支持下面關鍵字值：
'default'
讓用戶的客戶端設備自己覺得那個GPU配置是最合適的。這個是此參數的默認值。
'high-performance'
渲染性能優先，通常更耗掉（如手機，平板等移動設備）。
'low-power'
省電優先，渲染性能權重可以低一些。
premultipliedAlphaBoolean
表示頁面合成器將假定繪圖緩沖區包含具有alpha預乘（pre-multiplied alpha）顏色。
preserveDrawingBufferBoolean
如果值為true，則不會清除緩沖區並保留其值，直到作者清除或覆蓋。
stencilBoolean
表示繪圖緩沖區具有至少8位的模板緩沖區。
返回值
無論getContext()方法中的參數是什么，其返回值都可以稱之為RenderingContext，再細分可以包括下面這些：
'2d'參數值對應的CanvasRenderingContext2D；
'webgl'或experimental-webgl參數值對應的WebGLRenderingContext；
'webgl2'參數值對應的WebGL2RenderingContext；
'bitmaprenderer'參數值對應的ImageBitmapRenderingContext。
2.toBlob()
void canvas.toBlob(callback, mimeType, quality);
參數說明
callbackFunction
toBlob()方法執行成功后的回調方法，支持一個參數，表示當前轉換的Blob對象。
mimeType（可選）String
mimeType表示需要轉換的圖像的mimeType類型。默認值是image/png，還可以是image/jpeg，甚至image/webp（前提瀏覽器支持）等。
quality（可選）Number
quality表示轉換的圖片質量。范圍是0到1。由於Canvas的toBlob()方法轉PNG是無損的，因此，此參數默認是沒有效的，除非，指定圖片mimeType是image/jpeg或者image/webp，此時默認壓縮值是0.92。
3.toDataURL()
canvas.toDataURL(mimeType, quality);
參數說明
mimeType（可選）String
mimeType表示需要轉換的圖像的mimeType類型。默認值是image/png，還可以是image/jpeg，甚至image/webp（前提瀏覽器支持）等。
quality（可選）Number
quality表示轉換的圖片質量。范圍是0到1。此參數要想有效，圖片的mimeType需要是image/jpeg或者image/webp，其他mimeType值無效。默認壓縮質量是0.92。
根據自己的肉眼分辨，如果使用toDataURL()的quality參數對圖片進行壓縮，同樣的壓縮百分比呈現效果要比Adobe Photoshop差一些。
返回值
返回base64 data圖片數據。
更多：