如何優(yōu)化canvas性能

本篇內(nèi)容主要講解“如何優(yōu)化canvas性能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何優(yōu)化canvas性能”吧!

　　優(yōu)化canvas減少重復(fù)繪制Canvas代碼內(nèi)容

　　很多時(shí)候我們在Canvas上繪制與更新，總是會保留一些不變的內(nèi)容，對于這些內(nèi)容

　　應(yīng)該預(yù)先繪制緩存，而不是每次刷新?！?/p>

　　直接繪制代碼如下：

　　context.font="24pxArial";

　　context.fillStyle="blue";

　　context.fillText("Pleasepress<Esc>toexitgame",5,50);

　　requestAnimationFrame(render);

　　使用緩存預(yù)繪制技術(shù)：

　　functionrender(context){

　　 context.drawImage(mText_canvas,0,0);

　　 requestAnimationFrame(render);

　　}

　　functiondrawText(context){

　　 mText_canvas=document.createElement("canvas");

　　 mText_canvas.width=450;

　　 mText_canvas.height=54;

　　 varm_context=mText_canvas.getContext("2d");

　　 m_context.font="24pxArial";

　　 m_context.fillStyle="blue";

　　 m_context.fillText("Pleasepress<Esc>toexitgame",5,50);

　　}

　　優(yōu)化canvas緩存Canvas對象大小要小于實(shí)際的Canvas

　　大小。盡量把繪制直線點(diǎn)的操作放在一起，而且盡量一次繪制完成，一個(gè)不好的代碼如下：

　　for(vari=0;i<points.length-1;i++){

　　 varp1=points[i];

　　 varp2=points[i+1];

　　 context.beginPath();

　　 context.moveTo(p1.x,p1.y);

　　 context.lineTo(p2.x,p2.y);

　　 context.stroke();

　　}

到此，相信大家對“如何優(yōu)化canvas性能”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！