最近做遊戲發現,為了節省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...