您的位置：首页 > Web前端 > HTML5

提高HTML5 Canvas性能的技巧

2015-04-08 09:19 417 查看
详细内容请点击

一：使用缓存技术实现预绘制，减少重复绘制Canvs内容

很多时候我们在Canvas上绘制与更新，总是会保留一些不变的内容，对于这些内容

应该预先绘制缓存，而不是每次刷新。

直接绘制代码如下：

context.font="24pxArial";
context.fillStyle="blue";
context.fillText("Pleasepresstoexitgame",5,50);
requestAnimationFrame(render);


使用缓存预绘制技术：

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("Pleasepresstoexitgame",5,50);
}


使用Canvas缓存绘制技术的时候，一定记得缓存Canvas对象大小要小于实际的Canvas

大小。尽量把绘制直线点的操作放在一起，而且尽量一次绘制完成，一个不好的代码如下：

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();
}


修改以后性能较高的代码如下：

context.beginPath();
for(vari=0;i<points.length-1;i++){
varp1=points[i];
varp2=points[i+1];
context.moveTo(p1.x,p1.y);
context.lineTo(p2.x,p2.y);
}
context.stroke();


避免不必要的Canvas绘制状态频繁切换，一个频繁切换绘制style的例子如下

varGAP=10;
for(vari=0;i<10;i++){
context.fillStyle=(i%2?"blue":"red");
context.fillRect(0,i*GAP,400,GAP);
}


避免频繁切换绘制状态，性能更好的绘制代码如下：

//even
context.fillStyle="red";
for(vari=0;i<5;i++){
context.fillRect(0,(i*2)*GAP,400,GAP);
}


//odd
context.fillStyle="blue";
for(vari=0;i<5;i++){
context.fillRect(0,(i*2+1)*GAP,400,GAP);
}


绘制时，只绘制需要更新的区域，任何时候都要避免不必要的重复绘制与额外开销。

对于复杂的场景绘制使用分层绘制技术，分为前景与背景分别绘制。定义Canvas层的

HTML如下：



清空Canvas上的绘制内容：

context.clearRect(0,0,canvas.width,canvas.height)

但是其实在Canvas还有一种类似hack的清空方法：

canvas.width=canvas.width;

也可以实现清空canvas上内容的效果，但是在某些浏览器上可能不支持。

<blockquote></blockquote>

学习来源：http://blog.csdn.net/jia20003/article/details/9225501

查看更多html5内容请点击
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航