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

2019-01-28 16:25:23于海丽

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

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

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