如何优化HTML5 Canvas程序的性能

this.color.push(“rgba(“+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,1)”);

}

this.useCache = useCache;

if(useCache){

this.cache();

}

}

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

XML/HTML Code复制内容到剪贴板

cache:function(){

this.cacheCtx.save();

var j=0;

this.cacheCtx.lineWidth = borderWidth;

for(var i=1;i

this.cacheCtx.beginPath();

thisthis.cacheCtx.strokeStyle = this.color[j];

this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);

this.cacheCtx.stroke();

j++;

}

this.cacheCtx.restore();

}

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

XML/HTML Code复制内容到剪贴板

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);

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

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

XML/HTML Code复制内容到剪贴板

body{

padding:0;

margin:0;

overflow: hidden;

}

#cas{

display: block;

background-color:rgba(0,0,0,0);

margin:auto;

border:1px solid;

}

this.color.push(“rgba(“+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,1)”);
}
this.useCache = useCache;
if(useCache){
this.cache();
}
}
当我实例化圈圈对象时，直接调用缓存方法，把复杂的圈圈直接画到圈圈对象的离屏canvas中保存起来。
XML/HTML Code复制内容到剪贴板
cache:function(){
this.cacheCtx.save();
var j=0;
this.cacheCtx.lineWidth = borderWidth;
for(var i=1;i

this.cacheCtx.beginPath();

thisthis.cacheCtx.strokeStyle = this.color[j];

this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);

this.cacheCtx.stroke();

j++;

}

this.cacheCtx.restore();

}

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

XML/HTML Code复制内容到剪贴板

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);

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

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

XML/HTML Code复制内容到剪贴板

body{
padding:0;
margin:0;
overflow: hidden;
}
#cas{
display: block;
background-color:rgba(0,0,0,0);
margin:auto;
border:1px solid;
}

浏览器不支持canvas

var testBox = function(){
var canvas = document.getElementById(“cas”),
ctx = canvas.getContext(‘2d’),
borderWidth = 2,
Balls = [];
var ball = function(x , y , vx , vy , useCache){
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.r = getZ(getRandom(20,40));
this.color = [];
this.cacheCanvas = document.createElement(“canvas”);
thisthis.cacheCtx = this.cacheCanvas.getContext(“2d”);
this.cacheCanvas.width = 2*this.r;
this.cacheCanvas.height = 2*this.r;
var num = getZ(this.r/borderWidth);
for(var j=0;j

this.color.push(“rgba(“+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,1)”);

}

this.useCache = useCache;

if(useCache){

this.cache();

}

}

function getZ(num){

var rounded;

rounded = (0.5 + num) | 0;

// A double bitwise not.

rounded = ~~ (0.5 + num);

// Finally, a left bitwise shift.

rounded = (0.5 + num)

return rounded;

}

ball.prototype = {

paint:function(ctx){

if(!this.useCache){

ctx.save();

var j=0;

ctx.lineWidth = borderWidth;

for(var i=1;i

ctx.beginPath();

ctx.strokeStyle = this.color[j];

ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);

ctx.stroke();

j++;

}

ctx.restore();

} else{

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);

}

},

cache:function(){

this.cacheCtx.save();

var j=0;

this.cacheCtx.lineWidth = borderWidth;

for(var i=1;i

this.cacheCtx.beginPath();

thisthis.cacheCtx.strokeStyle = this.color[j];

this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);

this.cacheCtx.stroke();

j++;

}

this.cacheCtx.restore();

},

move:function(){

this.x += this.vx;

this.y += this.vy;

if(this.x>(canvas.width-this.r)||this.x

thisthis.x=this.x

this.vx = -this.vx;

}

if(this.y>(canvas.height-this.r)||this.y

thisthis.y=this.y

this.vy = -this.vy;

}

this.paint(ctx);

}

}

var Game = {

init:function(){

for(var i=0;i

var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas.height) , getRandom(-10 , 10) , getRandom(-10 , 10) , true)

Balls.push(b);

}

},

update:function(){

ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i

Balls[i].move();

}

},

loop:function(){

var _this = this;

this.update();

RAF(function(){

_this.loop();

})

},

start:function(){

this.init();

this.loop();

}

}

window.RAF = (function(){

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };

})();

return Game;

}();

function getRandom(a , b){

return Math.random()*(b-a)+a;

}

window.onload = function(){

testBox.start();

}

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

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

　【使用requestAnimationFrame】

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

XML/HTML Code复制内容到剪贴板

window.RAF = (function(){

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };

})();

　　【避免浮点运算】

　　虽然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)

　　【尽量减少canvasAPI的调用】

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

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

关于“如何优化HTML5 Canvas程序的性能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何优化HTML5 Canvas程序的性能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

this.color.push(“rgba(“+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,”+getZ(getRandom(0,255))+”,1)”);
}
this.useCache = useCache;
if(useCache){
this.cache();
}
}
function getZ(num){
var rounded;
rounded = (0.5 + num) | 0;
// A double bitwise not.
rounded = ~~ (0.5 + num);
// Finally, a left bitwise shift.
rounded = (0.5 + num)

return rounded;
}
ball.prototype = {
paint:function(ctx){
if(!this.useCache){
ctx.save();
var j=0;
ctx.lineWidth = borderWidth;
for(var i=1;i

ctx.beginPath();

ctx.strokeStyle = this.color[j];

ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);

ctx.stroke();

j++;

}

ctx.restore();

} else{

ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);

}

},

cache:function(){

this.cacheCtx.save();

var j=0;

this.cacheCtx.lineWidth = borderWidth;

for(var i=1;i

this.cacheCtx.beginPath();

thisthis.cacheCtx.strokeStyle = this.color[j];

this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);

this.cacheCtx.stroke();

j++;

}

this.cacheCtx.restore();

},

move:function(){

this.x += this.vx;

this.y += this.vy;

if(this.x>(canvas.width-this.r)||this.x

thisthis.x=this.x

this.vx = -this.vx;

}

if(this.y>(canvas.height-this.r)||this.y

thisthis.y=this.y

this.vy = -this.vy;

}

this.paint(ctx);

}

}

var Game = {

init:function(){

for(var i=0;i

var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas.height) , getRandom(-10 , 10) , getRandom(-10 , 10) , true)

Balls.push(b);

}

},

update:function(){

ctx.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i

Balls[i].move();

}

},

loop:function(){

var _this = this;

this.update();

RAF(function(){

_this.loop();

})

},

start:function(){

this.init();

this.loop();

}

}

window.RAF = (function(){

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };

})();

return Game;

}();

function getRandom(a , b){

return Math.random()*(b-a)+a;

}

window.onload = function(){

testBox.start();

}

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

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

　【使用requestAnimationFrame】

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

XML/HTML Code复制内容到剪贴板

window.RAF = (function(){

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };

})();

　　【避免浮点运算】

　　虽然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)

　　【尽量减少canvasAPI的调用】

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

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

关于“如何优化HTML5 Canvas程序的性能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何优化HTML5 Canvas程序的性能”知识都有一定的了解，大家如果还想学习更多知免费云主机、域名识，欢迎关注云技术行业资讯频道。

var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas.height) , getRandom(-10 , 10) , getRandom(-10 , 10) , true)
Balls.push(b);
}
},
update:function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i

Balls[i].move();

}

},

loop:function(){

var _this = this;

this.update();

RAF(function(){

_this.loop();

})

},

start:function(){

this.init();

this.loop();

}

}

window.RAF = (function(){

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };

})();

return Game;

}();

function getRandom(a , b){

return Math.random()*(b-a)+a;

}

window.onload = function(){

testBox.start();

}

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

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

　【使用requestAnimationFrame】

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

XML/HTML Code复制内容到剪贴板

window.RAF = (function(){

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };

})();

　　【避免浮点运算】

　　虽然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)

　　【尽量减少canvasAPI的调用】

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

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

关于“如何优化HTML5 Canvas程序的性能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何优化HTML5 Canvas程序的性能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

Balls[i].move();
}
},
loop:function(){
var _this = this;
this.update();
RAF(function(){
_this.loop();
})
},
start:function(){
this.init();
this.loop();
}
}
window.RAF = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
})();
return Game;
}();
function getRandom(a , b){
return Math.random()*(b-a)+a;
}
window.onload = function(){
testBox.start();
}

　　离屏canvas还有一个注意事项，如果你做的效果是会将对象不停地创建和销毁，请慎重使用离屏canvas，至少不要像我上面写的那样给每个对象的属性绑定离屏canvas。
　　因为如果这样绑定，当对象被销毁时，离屏canvas也会被销毁，而大量的离屏canvas不停地被创建和销毁，会导致canvas buffer耗费大量GPU资源，容易造成浏览器崩溃或者严重卡帧现象。解决办法就是弄一个离屏canvas数组，预先装进足够数量的离屏canvas，仅将仍然存活的对象缓存起来，当对象被销毁时，再解除缓存。这样就不会导致离屏canvas被销毁了。
　【使用requestAnimationFrame】
　　这个就不具体解释了，估计很多人都知道，这个才是做动画的最佳循环，而不是setTimeout或者setInterval。直接贴出兼容性写法：
XML/HTML Code复制内容到剪贴板
window.RAF = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
})();
　　【避免浮点运算】
　　虽然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)

　　【尽量减少canvasAPI的调用】
　　作粒子效果时，尽量少使用圆，最好使用方形，因为粒子太小，所以方形看上去也跟圆差不多。至于原因，很容易理解，我们画一个圆需要三个步骤：先beginPath，然后用arc画弧，再用fill进行填充才能产生一个圆。但是画方形，只需要一个fillRect就可以了。虽然只是差了两个调用，当粒子对象数量达到一定时，这性能差距就会显示出来了。
　　还有一些其他注意事项，我就不一一列举了，因为谷歌上一搜也挺多的。我这也算是一个给自己做下记录，主要是记录缓存的用法。想要提升canvas的性能最主要的还是得注意代码的结构，减少不必要的API调用，在每一帧中减少复杂的运算或者把复杂运算由每一帧算一次改成数帧算一次。同时，上面所述的缓存用法，我因为贪图方便，所以是每个对象一个离屏canvas，其实离屏canvas也不能用的太泛滥，如果用太多离屏canvas也会有性能问题，请尽量合理利用离屏canvas。关于“如何优化HTML5 Canvas程序的性能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何优化HTML5 Canvas程序的性能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

相关推荐: 怎么用纯CSS实现飞机舷窗风格的toggle控件

这篇文章主要介绍了怎么用纯CSS实现飞机舷窗风免费云主机、域名格的toggle控件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 代码解读 定义dom，.windows容器表示舷窗，它的子元素.…