canvas force

forked from SpaceActuary's block: Group Clustering

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
	    body{
	    	padding:0;
	    	margin:0;
	    	overflow: hidden;
	    }
		#cas{
			display: block;
			background-color:rgba(0,0,0,0);
			margin:auto;
			border:1px solid;
		}
	</style>
	<title>缓存测试(有缓存)</title>
</head>
<body>
	<div >
		<canvas id='cas' width="800" height="600">浏览器不支持canvas</canvas>
		<div style="text-align:center">使用了缓存，1000个圈圈对象也不卡</div>
	</div>

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) << 0;

return rounded;
			}

ball.prototype = {
				paint:function(ctx){
					if(!this.useCache){
						ctx.save();
						var j=0;
						ctx.lineWidth = borderWidth;
						for(var i=1;i<this.r;i+=borderWidth){
							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.r;i+=borderWidth){
						this.cacheCtx.beginPath();
						this.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<this.r){
						this.x=this.x<this.r?this.r:(canvas.width-this.r);
						this.vx = -this.vx;
					}
					if(this.y>(canvas.height-this.r)||this.y<this.r){
						this.y=this.y<this.r?this.r:(canvas.height-this.r);
						this.vy = -this.vy;
					}

this.paint(ctx);
				}
			}

var Game = {
				init:function(){
					for(var i=0;i<1000;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.length;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();
		}
	</script>
</body>
</html>