Canvas实现鼠标效果

最新推荐文章于 2024-03-27 19:38:55 发布

大雾四时起

最新推荐文章于 2024-03-27 19:38:55 发布

阅读量985

点赞数 3

分类专栏： Canvas 文章标签： canvas html5

本文链接：https://blog.csdn.net/qq_45666837/article/details/109484622

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

排版(布局)

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

css样式

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-color: black;
	}		
</style>

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>

效果图

在这里插入图片描述

大雾四时起

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现鼠标效果

排版(布局)<body> <canvas id="cc" width="" height=""></canvas></body>css样式<style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: black; } </style>js代码<script type="text/javascri
复制链接

扫一扫