Canvas实现鼠标效果

排版(布局)

<body>
    <canvas id="cc" width="" height="">canvas>
body>

css样式


js代码

<script type="text/javascript">
	var myCanvas = document.querySelector("#cc");
	var ctx = myCanvas.getContext("2d");
	
	myCanvas.width = document.documentElement.clientWidth;
	myCanvas.height = document.documentElement.clientHeight;

	//创建一个球类
	function Ball(x,y){
     
		this.x = x;
		this.y = y;
		this.r = 30;
		this.color = "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
		this.dx = parseInt(Math.random()*15)-4; //x 每帧的变化值
		this.dy = parseInt(Math.random()*15)-4; //y 每帧的变化值
				
		//每次调用构造函数,都将自己添加到数组中
		ballarr.push(this);
	}
			
	//渲染小球
	Ball.prototype.reder = function(){
     
		ctx.beginPath();
		ctx.arc(this.x,this.y,this.r,0,2*Math.PI,true);
		ctx.closePath();
		ctx.fillStyle = this.color;
		ctx.fill();
	}

	//更新数据
	Ball.prototype.update = function(){
     
		this.x += this.dx;
		this.y += this.dy;	
		this.r--;
		//如果半径为0,从数组中删除它
		if(this.r < 0){
     
			this.godie();
		}
	}
			
	//自杀
	Ball.prototype.godie = function(){
     
		for(var i = 0; i < ballarr.length;i++){
     
			if(ballarr[i] === this){
     
				ballarr.splice(i,1); //删除指定位置的指定长度
			}
		}			
	}
			
	var ballarr = [];
//	var b = new Ball(100,100);
//	b.reder();
				
	//canvas自身的方法都是由获取到的上下文来调用的
	//但dom时间的绑定是给canvas这个标签
	myCanvas.onmousemove = function(){
     
		//鼠标每次移动,都去调用构造函数,创建小球
		new Ball(event.clientX,event.clientY); //函数需要两个参数  x y
	}
	
	setInterval(function(){
     
		ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
//		b.update();
//		b.reder();

		for(var i = 0; i < ballarr.length; i++){
     
			ballarr[i].update();
			//因为update可能会删除这个小球(r小于0)
			//所以要验证一下这个小球是否存在
				ballarr[i] && ballarr[i].reder();
		}	
	},20)
</script>

效果图

Canvas实现鼠标效果_第1张图片

你可能感兴趣的:(Canvas,canvas,html5)