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對象使用。

固然以上的結論爲我我的開發時的遇到的問題的總結，若是有誤請提出。由於樣本數量和圖片格式並無達到太多。