HTML5 drawImage效能問題

2022-05-11 06:10:39 字數 645 閱讀 1997

最近做遊戲發現,為了節省http請求,把很多組動畫放到了一張上,也就是傳說中的雪碧圖,但是用drawimage從上擷取一部分繪製在canvas上時會非常慢。

我的尺寸為5000*7000

ctx.drawimage(  img,0,0,100,100,0,0,100,100 )

居然會耗時 125 毫秒 這簡直不能忍。[環境:win10 chorme version 44.0.2403.125 cpu:amd a8 gpu:hd8750]

解決方案:

把需要用到的幀先擷取出來,並儲存。

var imgbuffer={};

for (var i in this.texturemap)

tobj=createemptycanvas(ttemp.w,ttemp.h);

tctx=tobj.ctx;

tctx.drawimage(

this.texture,

ttemp.x,

ttemp.y,

ttemp.w,

ttemp.h,

0,0,

ttemp.w,

ttemp.h

);imgbuffer[i]=;

}然後需要繪製的時候直接充imgbuffer中讀取就好了,fps一下就上去了。。。。

html5結構性元素簡單介紹

一 結構性元素主要負責web上下文結構的定義 1 區段 類似於段落 在 web 頁面應用中,該元素也可以用於區域的章節描述。2 頁面主體上的頭部,header 元素往往在一對 body 元素中。二 article與section的區別 1 section和article可以互相巢狀,它們沒有上下級關...

html5介紹,什麼是html5,html5新特性

html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 是 w3c 與 whatwg 合作的結果。編...

HTML5新標籤的相容性處理

html5新的語義標籤儘管有很多的好處,但是在低版本的老ie瀏覽器中還是存在相容性問題的,常常讓人感到頭疼,到底是大膽的使用新標籤還是使用傳統的大量的div無義標籤?今天就簡單的看看h5新標籤的相容性處理方式。首先來看一小段簡單的 html 1 2 311 1214 159 10 header he...