浅谈利用缓存来优化HTML5 Canvas程序的性能

html教程 跟版网
这篇文章主要介绍了浅谈利用缓存来优化HTML5 Canvas程序的性能,并且作者给出了使用缓存以及离屏Canvas后性能较原程序的提升对比,需要的朋友可以参考下

canvas玩多了后，就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢？

　　【使用缓存】

　　使用缓存也就是用离屏canvas进行预渲染了，原理很简单，就是先绘制到一个离屏canvas中，然后再通过drawImage把离屏canvas画到主canvas中。可能看到这很多人就会误解，这不是写游戏里面用的很多的双缓冲机制么？

　　其实不然，双缓冲机制是游戏编程中为了防止画面闪烁，因此会有一个显示在用户面前的画布以及一个后台画布，进行绘制时会先将画面内容绘制到后台画布中，再将后台画布里的数据绘制到前台画布中。这就是双缓冲，但是canvas中是没有双缓冲的，因为现代浏览器基本上都是内置了双缓冲机制。所以，使用离屏canvas并不是双缓冲，而是把离屏canvas当成一个缓存区。把需要重复绘制的画面数据进行缓存起来，减少调用canvas的API的消耗。

　　众所周知，调用canvas的API很消耗性能，所以，当我们要绘制一些重复的画面数据时，妥善利用离屏canvas对性能方面有很大的提升，可以看下下面的DEMO

　　1 、 没使用缓存   

　　2、  使用了缓存但是没有设置离屏canvas的宽高  

      3 、 使用了缓存但是没有设置离屏canvas的宽高  

　　4 、 使用了缓存且设置了离屏canvas的宽高

　　可以看到上面的DEMO的性能不一样，下面分析一下原因：为了实现每个圈的样式，所以绘制圈圈时我用了循环绘制，如果没用启用缓存，当页面的圈圈数量达到一定时，动画每一帧就要大量调用canvas的API，要进行大量的计算，这样再好的浏览器也会被拖垮啦。
XML/HTML Code复制内容到剪贴板

  1. ctx.save();   
  2.                         var j=0;   
  3.                         ctx.lineWidth = borderWidth;   
  4.                         for(var i=1;i<this.r;i+=borderWidth){   
  5.                             ctx.beginPath();   
  6.                             ctx.strokeStyle = this.color[j];   
  7.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
  8.                             ctx.stroke();   
  9.                             j++;   
  10.                         }   
  11.                         ctx.restore();  

　　所以，我的方法很简单，每个圈圈对象里面给他一个离屏canvas作缓存区。

　　除了创建离屏canvas作为缓存之外，下面的代码中有一点很关键，就是要设置离屏canvas的宽度和高度，canvas生成后的默认大小是300X150；对于我的代码中每个缓存起来圈圈对象半径最大也就不超过80，所以300X150的大小明显会造成很多空白区域，会造成资源浪费，所以就要设置一下离屏canvas的宽度和高度，让它跟缓存起来的元素大小一致，这样也有利于提高动画性能。上面的四个demo很明显的显示出了性能差距，如果没有设置宽高，当页面超过400个圈圈对象时就会卡的不行了，而设置了宽高1000个圈圈对象也不觉得卡。

XML/HTML Code复制内容到剪贴板
  1. var ball = function(x , y , vx , vy , useCache){   
  2.                 this.x = x;   
  3.                 this.y = y;   
  4.                 this.vx = vx;   
  5.                 this.vy = vy;   
  6.                 this.r = getZ(getRandom(20,40));   
  7.                 this.color = [];   
  8.                 this.cacheCanvas = document.createElement("canvas");   
  9.                 thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
  10.                 this.cacheCanvas.width = 2*this.r;   
  11.                 this.cacheCanvas.height = 2*this.r;   
  12.                 var num = getZ(this.r/borderWidth);   
  13.                 for(var j=0;j<num;j++){   
  14.                     this.color.push("rgba("+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+",1)");   
  15.                 }   
  16.                 this.useCache = useCache;   
  17.                 if(useCache){   
  18.                     this.cache();   
  19.                 }   
  20.             }  

 

当我实例化圈圈对象时，直接调用缓存方法，把复杂的圈圈直接画到圈圈对象的离屏canvas中保存起来。

XML/HTML Code复制内容到剪贴板
  1. cache:function(){   
  2.                     this.cacheCtx.save();   
  3.                     var j=0;   
  4.                     this.cacheCtx.lineWidth = borderWidth;   
  5.                     for(var i=1;i<this.r;i+=borderWidth){   
  6.                         this.cacheCtx.beginPath();   
  7.                         thisthis.cacheCtx.strokeStyle = this.color[j];   
  8.                         this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
  9.                         this.cacheCtx.stroke();   
  10.                         j++;   
  11.                     }   
  12.                     this.cacheCtx.restore();   
  13.                 }  

然后在接下来的动画中，我只需要把圈圈对象的离屏canvas画到主canvas中，这样，每一帧调用的canvasAPI就只有这么一句话：

XML/HTML Code复制内容到剪贴板
  1. ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);  

跟之前的for循环绘制比起来，实在是快太多了。所以当需要重复绘制矢量图的时候或者绘制多个图片的时候，我们都可以合理利用离屏canvas来预先把画面数据缓存起来，在接下来的每一帧中就能减少很多没必要的消耗性能的操作。

下面贴出1000个圈圈对象流畅版代码：
　　

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <style>  
  6.         body{   
  7.             padding:0;   
  8.             margin:0;   
  9.             overflow: hidden;   
  10.         }   
  11.         #cas{   
  12.             display: block;   
  13.             background-color:rgba(0,0,0,0);   
  14.             margin:auto;   
  15.             border:1px solid;   
  16.         }   
  17.     </style>  
  18.     <title>测试</title>  
  19. </head>  
  20. <body>  
  21.     <div >  
  22.         <canvas id='cas' width="800" height="600">浏览器不支持canvas</canvas>  
  23.         <div style="text-align:center">1000个圈圈对象也不卡</div>  
  24.     </div>  
  25.   
  26.     <script>  
  27.         var testBox = function(){   
  28.             var canvas = document.getElementById("cas"),   
  29.                 ctx = canvas.getContext('2d'),   
  30.                 borderWidth = 2,   
  31.                 Balls = [];   
  32.             var ball = function(x , y , vx , vy , useCache){   
  33.                 this.x = x;   
  34.                 this.y = y;   
  35.                 this.vx = vx;   
  36.                 this.vy = vy;   
  37.                 this.r = getZ(getRandom(20,40));   
  38.                 this.color = [];   
  39.                 this.cacheCanvas = document.createElement("canvas");   
  40.                 thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
  41.                 this.cacheCanvas.width = 2*this.r;   
  42.                 this.cacheCanvas.height = 2*this.r;   
  43.                 var num = getZ(this.r/borderWidth);   
  44.                 for(var j=0;j<num;j++){   
  45.                     this.color.push("rgba("+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+",1)");   
  46.                 }   
  47.                 this.useCache = useCache;   
  48.                 if(useCache){   
  49.                     this.cache();   
  50.                 }   
  51.             }   
  52.   
  53.             function getZ(num){   
  54.                 var rounded;   
  55.                 rounded = (0.5 + num) | 0;   
  56.                 // A double bitwise not.   
  57.                 rounded = ~~ (0.5 + num);   
  58.                 // Finally, a left bitwise shift.   
  59.                 rounded = (0.5 + num) << 0;   
  60.   
  61.                 return rounded;   
  62.             }   
  63.   
  64.             ball.prototype = {   
  65.                 paint:function(ctx){   
  66.                     if(!this.useCache){   
  67.                         ctx.save();   
  68.                         var j=0;   
  69.                         ctx.lineWidth = borderWidth;   
  70.                         for(var i=1;i<this.r;i+=borderWidth){   
  71.                             ctx.beginPath();   
  72.                             ctx.strokeStyle = this.color[j];   
  73.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
  74.                             ctx.stroke();   
  75.                             j++;   
  76.                         }   
  77.                         ctx.restore();   
  78.                     } else{   
  79.                         ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);   
  80.                     }   
  81.                 },   
  82.   
  83.                 cache:function(){   
  84.                     this.cacheCtx.save();   
  85.                     var j=0;   
  86.                     this.cacheCtx.lineWidth = borderWidth;   
  87.                     for(var i=1;i<this.r;i+=borderWidth){   
  88.                         this.cacheCtx.beginPath();   
  89.                         thisthis.cacheCtx.strokeStyle = this.color[j];   
  90.                         this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
  91.                         this.cacheCtx.stroke();   
  92.                         j++;   
  93.                     }   
  94.                     this.cacheCtx.restore();   
  95.                 },   
  96.   
  97.                 move:function(){   
  98.                     this.x += this.vx;   
  99.                     this.y += this.vy;   
  100.                     if(this.x>(canvas.width-this.r)||this.x<this.r){   
  101.                         thisthis.x=this.x<this.r?this.r:(canvas.width-this.r);   
  102.                         this.vx = -this.vx;   
  103.                     }   
  104.                     if(this.y>(canvas.height-this.r)||this.y<this.r){   
  105.                         thisthis.y=this.y<this.r?this.r:(canvas.height-this.r);   
  106.                         this.vy = -this.vy;   
  107.                     }   
  108.   
  109.                     this.paint(ctx);   
  110.                 }   
  111.             }   
  112.   
  113.             var Game = {   
  114.                 init:function(){   
  115.                     for(var i=0;i<1000;i++){   
  116.                         var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas.height) , getRandom(-10 , 10) ,  getRandom(-10 , 10) , true)   
  117.                         Balls.push(b);   
  118.                     }   
  119.                 },   
  120.   
  121.                 update:function(){   
  122.                     ctx.clearRect(0,0,canvas.width,canvas.height);   
  123.                     for(var i=0;i<Balls.length;i++){   
  124.                         Balls[i].move();   
  125.                     }   
  126.                 },   
  127.   
  128.                 loop:function(){   
  129.                     var _this = this;   
  130.                     this.update();   
  131.                     RAF(function(){   
  132.                         _this.loop();   
  133.                     })   
  134.                 },   
  135.   
  136.                 start:function(){   
  137.                     this.init();   
  138.                     this.loop();   
  139.                 }   
  140.             }   
  141.   
  142.             window.RAF = (function(){   
  143.                 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };   
  144.             })();   
  145.   
  146.             return Game;   
  147.         }();   
  148.   
  149.         function getRandom(a , b){   
  150.             return Math.random()*(b-a)+a;   
  151.         }   
  152.   
  153.         window.onload = function(){   
  154.             testBox.start();   
  155.         }   
  156.     </script>  
  157. </body>  
  158. </html>  

　　离屏canvas还有一个注意事项，如果你做的效果是会将对象不停地创建和销毁，请慎重使用离屏canvas，至少不要像我上面写的那样给每个对象的属性绑定离屏canvas。

　　因为如果这样绑定，当对象被销毁时，离屏canvas也会被销毁，而大量的离屏canvas不停地被创建和销毁，会导致canvas buffer耗费大量GPU资源，容易造成浏览器崩溃或者严重卡帧现象。解决办法就是弄一个离屏canvas数组，预先装进足够数量的离屏canvas，仅将仍然存活的对象缓存起来，当对象被销毁时，再解除缓存。这样就不会导致离屏canvas被销毁了。

 

　【使用requestAnimationFrame】

　　这个就不具体解释了，估计很多人都知道，这个才是做动画的最佳循环，而不是setTimeout或者setInterval。直接贴出兼容性写法：

XML/HTML Code复制内容到剪贴板
  1. window.RAF = (function(){   
  2.        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };   
  3.             })();   

　　

　　【避免浮点运算】

　　虽然javascript提供了很方便的一些取整方法，像Math.floor，Math.ceil，parseInt，但是，国外友人做过测试，parseInt这个方法做了一些额外的工作（比如检测数据是不是有效的数值，parseInt 甚至先将参数转换成了字符串!），所以，直接用parseInt的话相对来说比较消耗性能，那怎样取整呢，可以直接用老外写的很巧妙的方法了：

    JavaScript Code复制内容到剪贴板

    1.rounded = (0.5 + somenum) | 0;      

    2.rounded = ~~ (0.5 + somenum);   3.rounded = (0.5 + somenum) << 0;      

    运算符不懂的可以直接戳：http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp  里面有详细解释

　　

　　【尽量减少canvasAPI的调用】

　　作粒子效果时，尽量少使用圆，最好使用方形，因为粒子太小，所以方形看上去也跟圆差不多。至于原因，很容易理解，我们画一个圆需要三个步骤：先beginPath，然后用arc画弧，再用fill进行填充才能产生一个圆。但是画方形，只需要一个fillRect就可以了。虽然只是差了两个调用，当粒子对象数量达到一定时，这性能差距就会显示出来了。

　　还有一些其他注意事项，我就不一一列举了，因为谷歌上一搜也挺多的。我这也算是一个给自己做下记录，主要是记录缓存的用法。想要提升canvas的性能最主要的还是得注意代码的结构，减少不必要的API调用，在每一帧中减少复杂的运算或者把复杂运算由每一帧算一次改成数帧算一次。同时，上面所述的缓存用法，我因为贪图方便，所以是每个对象一个离屏canvas，其实离屏canvas也不能用的太泛滥，如果用太多离屏canvas也会有性能问题，请尽量合理利用离屏canvas。

 　　源码地址：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Other-demo/cache

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main，header，footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理？你可能花几天也想不明白，但谁在意呢！这个脚本几乎是所有正式网站必用
HTML5之Canvas基础绘图教程
HTML5 火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线： !doctype html ht
HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这
微软开源新一代浏览器的JavaScript引擎核心代码
近日，微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号，项目名称为 ChakraCore，遵循MIT许可协议。 ...，HTML5中国，中国最大的HTML5中文门户。
Google Chrome终于支持CSS Variables了
这篇文章报道的不是“新闻”，因为W3C早已开始着手CSS变量方面的工作。至于Google，则要追溯到11月初，当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...，HTML5中国，中国最大的HTML5中文门户。
如果你坚持写代码,25年后你将会遇到这些...
25年后，你发的编程知识经验还会增加，但薪水却不加了；25年后，如果你还热爱编程便不会选择转行去当管理人员；25年后，你想和好友去玩耍，而经理却让你加班；那么你是否想过这25年之间做出另一种选择呢？ ...，HTML5中国，中国最大的HTML5中文门户。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室