如何优化canvas性能

本篇内容主要讲解“如何优化canvas性能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何优化canvas性能”吧!

　　优化canvas减少重复绘制Canvas代码内容

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

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

　　直接绘制代码如下：

　　context.font="24pxArial";

　　context.fillStyle="blue";

　　context.fillText("Pleasepress<Esc>toexitgame",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("Pleasepress<Esc>toexitgame",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();

　　}

到此，相信大家对“如何优化canvas性能”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！