一、HTMLCanvasElement
canvas标签对象，首先是Element对象支持节点通用操作
canvas属性
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图片数据。
更多：