当前位置 博文首页 > Mr.苏:canvas性能-drawImage渲染图片
一般我们绘制图片会用到的方法是drawImage
和putImageData
,还有作为测试环境使用的createPattern
描述:
使用方式:
ctx.drawImage(image,sx,sy,swidth,sheight,x,y,width,height)
描述: Canvas 2D API 将数据从已有的 ImageData
对象绘制到位图的方法。 如果提供了一个绘制过的矩形,则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。
使用方式:
ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
描述:指定的方向内重复指定的元素,元素可以是图片、视频,或者其他 canvas 元素,被重复的元素可用于绘制/填充矩形、圆形或线条等等。
使用方式:
ctx.fillStyle = ctx.createPattern(img,"repeat")
ctx.fill();
测试图片尺寸为(500x500)和(1920x1080)的jpg图片
首先测试的是drawImage
方法,通过绘制同一张图片不同的资源类型下的耗时
createPattern
填充了canvas作为背景的情况下渲染该图片耗时:0.01ms左右createPattern
填充了canvas作为背景的情况下渲染该图片耗时:0.01ms左右,(1920*1080)是2ms左右createPattern
填充了canvas作为背景的情况下渲染该图片耗时:12ms左右,(1920*1080)是14ms左右createPattern
填充了canvas作为背景的情况下渲染该图片耗时:2ms左右渲染图片方式 | 空白canvas下渲染耗时 图片尺寸(500*500) | 使用createPattern铺满下渲染耗时 图片尺寸(500*500) | 空白canvas下渲染耗时 图片尺寸(1920*1080) | 使用createPattern铺满下渲染耗时 图片尺寸(1920*1080) |
---|---|---|---|---|
drawImage(Image) | 0.01ms | 0.01ms | 0.01ms | 0.01ms |
drawImage(ImageBitmap) | 0.01ms | 0.01ms | 0.01ms | 0.01ms |
drawImage(HTMLCanvasElement) | 0.01ms | 12ms | 0.01ms | 14ms |
putImageData | 1ms | 2ms | 1.8ms | 3ms |
- 由上面的测试结果可以看出在空白canvas下渲染图片,除了putImageData剩下的性能是一致的即Image = ImageBitmap = HTMLCanvasElement > putImageData。
- 而使用了createPattern平铺作为背景的情况下Image = ImageBitmap > putImageData > HTMLCanvasElement
- 渲染图片尺寸大小一般情况下对drawImage(Image)和drawImage(ImageBitmap)的影响较小,而且性能优越。
- createPattern铺满的情况下drawImage(HTMLCanvasElement)的性能最差和drawImage(Image)能达到3个数量级的差距
- drawImage(HTMLCanvasElement)在空白canvas下性能也很优越
- putImageData的性能处于中等,使用createPattern铺满背景的情况下会有一定影响,不过不是太大
所以可以不使用使用createPattern铺满背景的情况下尽量不要使用,可以使用多层canvas,不必要的层级可以减少重绘。或者将平铺的背景转为Image对象使用。
当然以上的结论为我个人开发时的遇到的问题的总结,如果有误请提出。因为样本数量和图片格式并没有达到太多。