HTMLCanvasElement 整理

一、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图片数据。

更多：

Canvas 实现圆圈进度展示/进度动画 

canvas应用——将方形图片处理为圆形  

Canvas保存图片保存到本地