canvas性能-绘制图片

canvas绘制图片

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

描述：

使用方式：

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：可选。要使用的图像的高度。（伸展或缩小图像）

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

使用方式：

ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

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

使用方式：

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

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

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

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