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图片数据。
更多: