canvas性能-drawImage渲染图片

2021-01-25

canvas性能-绘制图片

canvas绘制图片

一般我们绘制图片会用到的方法是drawImageputImageData,还有作为测试环境使用的createPattern

drawImage

描述:

使用方式:

ctx.drawImage(image,sx,sy,swidth,sheight,x,y,width,height)
  • image的类型:
    • HTMLImageElement:这些图片是由Image()函数构造出来的,或者任何的img元素
    • HTMLVideoElement:用一个HTML的video元素作为你的图片源,可以从视频中抓取当前帧作为一个图像
    • HTMLCanvasElement:可以使用另一个canvas元素作为你的图片源
    • ImageBitmap:这是一个高性能的位图,可以低延迟地绘制,它可以从上述的所有源以及其它几种源中生成
  • sx:可选。开始剪切的 x 坐标位置
  • sy:可选。开始剪切的 y 坐标位置
  • swidth:可选。被剪切图像的宽度
  • sheight:可选。被剪切图像的高度
  • x:在画布上放置图像的 x 坐标位置
  • y:在画布上放置图像的 y 坐标位置
  • width:可选。要使用的图像的宽度。(伸展或缩小图像)
  • height:可选。要使用的图像的高度。(伸展或缩小图像)

putImageData

描述: Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。 如果提供了一个绘制过的矩形,则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。

使用方式:

ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
  • ImageData:包含像素值的数组对象
  • dx:源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)
  • dy:源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)
  • dirtyX:可选 在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(x 坐标)
  • dirtyY:可选 在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(y 坐标)
  • dirtyWidth:可选 在源图像数据中,矩形区域的宽度。默认是图像数据的宽度
  • dirtyHeight:可选 在源图像数据中,矩形区域的高度。默认是图像数据的高度。

createPattern

描述:指定的方向内重复指定的元素,元素可以是图片、视频,或者其他 canvas 元素,被重复的元素可用于绘制/填充矩形、圆形或线条等等。

使用方式:

ctx.fillStyle = ctx.createPattern(img,"repeat")
ctx.fill();

测试绘制耗时

测试图片尺寸为(500x500)和(1920x1080)的jpg图片

drawImage

首先测试的是drawImage方法,通过绘制同一张图片不同的资源类型下的耗时

Image类型
  • 在空白canvas情况下渲染该图片耗时:0.01ms左右
  • 在使用了createPattern填充了canvas作为背景的情况下渲染该图片耗时:0.01ms左右
ImageBitmap类型
  • 在空白canvas情况下渲染该图片耗时:1ms左右,(1920*1080)是1.8ms左右
  • 在使用了createPattern填充了canvas作为背景的情况下渲染该图片耗时:0.01ms左右,(1920*1080)是2ms左右
HTMLCanvasElement类型
  • 在空白canvas情况下渲染该图片耗时:0.01ms左右
  • 在使用了createPattern填充了canvas作为背景的情况下渲染该图片耗时:12ms左右,(1920*1080)是14ms左右

putImageData

  • 在空白canvas情况下渲染该图片耗时:1ms左右
  • 在使用了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

结论

  1. 由上面的测试结果可以看出在空白canvas下渲染图片,除了putImageData剩下的性能是一致的即Image = ImageBitmap = HTMLCanvasElement > putImageData。
  2. 而使用了createPattern平铺作为背景的情况下Image = ImageBitmap > putImageData > HTMLCanvasElement
  3. 渲染图片尺寸大小一般情况下对drawImage(Image)和drawImage(ImageBitmap)的影响较小,而且性能优越。
  4. createPattern铺满的情况下drawImage(HTMLCanvasElement)的性能最差和drawImage(Image)能达到3个数量级的差距
  5. drawImage(HTMLCanvasElement)在空白canvas下性能也很优越
  6. putImageData的性能处于中等,使用createPattern铺满背景的情况下会有一定影响,不过不是太大

所以可以不使用使用createPattern铺满背景的情况下尽量不要使用,可以使用多层canvas,不必要的层级可以减少重绘。或者将平铺的背景转为Image对象使用。

当然以上的结论为我个人开发时的遇到的问题的总结,如果有误请提出。因为样本数量和图片格式并没有达到太多。