canvas性能-绘制图片
目录
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 |
结论
- 由上面的测试结果可以看出在空白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对象使用。
当然以上的结论为我个人开发时的遇到的问题的总结，如果有误请提出。因为样本数量和图片格式并没有达到太多。