canvas性能-drawImage渲染图片

canvas性能-绘制图片

目录

• canvas性能-绘制图片
  • canvas绘制图片
    • drawImage
    • putImageData
    • createPattern
  • 测试绘制耗时
    • drawImage
      • Image类型
      • ImageBitmap类型
      • HTMLCanvasElement类型
    • putImageData
  • 结论

canvas绘制图片

通常咱们绘制图片会用到的方法是drawImage和putImageData，还有做为测试环境使用的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对象使用。

固然以上的结论为我我的开发时的遇到的问题的总结，若是有误请提出。由于样本数量和图片格式并无达到太多。