HTMLCanvasElement 整理

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

更多:

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

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

Canvas保存图片保存到本地  

posted @ 2020-10-17 14:15  天马3798  阅读(2514)  评论(0编辑  收藏  举报