canvas小球

482 0 0

作者:←水@痕→

	小球碰撞效果是采用面向对象的方式写的，在小球的构造器里包含了小球的属性值，大小，移动速度，半径大小以及颜色。在小球的原型方法里，添加了小球运动的方法，当小球碰撞到屏幕边界的时候进行反弹。小球是采用h5的canvas绘制，采用了性能更高的requestanimationframe作为计时器，该计时器是以屏幕的刷新率作基准，CPU占用较少，性能比settimeout以及setinterval性能更高，
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Ball</title>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	}

	canvas {
	background: #000;
	}
	</style>
	</head>

	<body>
	<canvas id='canv'>您的浏览器不支持CANVAS，请更换浏览器!!!</canvas>
	<script>
	document.addEventListener('resize', resize)

	function resize() {//监听屏幕缩放

	canvs.width = window.innerWidth;

	canvs.height = window.innerHeight;
	}
	var canvs = document.getElementById('canv');

	canvs.width = window.innerWidth;

	canvs.height = window.innerHeight;

	var ctx = canvs.getContext('2d');//获得canvas绘图环境

	var ball = function () {//小球构造器

	this.bx = Math.random() * canvs.width;//小球x轴的位置

	this.by = Math.random() * canvs.height;//小球y轴的位置

	this.r = Math.random() * 20 + 10;//小球的半径

	this.color = 'rgba('+Math.ceil (Math.random()255)+','+Math.ceil (Math.random()255)+','+Math.ceil (Math.random()*255)+','+Math.random()/4+')'//小球的颜色

	this.vx = Math.random() *10-5;//小球的x轴方向的运动速度

	this.vy = Math.random() *4-2;//小球y轴方向的速度
	}
	ball.prototype.draw = function () {//小球绘制方法
	// ctx.fillStyle = 'rgba(255,255,255,0.1)';
	// ctx.fillRect(0, 0, canvs.width, canvs.height);
	// ctx.clearRect(0, 0, canvs.width, canvs.height);
	ctx.beginPath();//开始路径
	var grd=ctx.createRadialGradient(this.bx,this.by,0,this.bx,this.by,this.r);//生成小球径向渐变色
	grd.addColorStop(0,"white");//里面的颜色
	grd.addColorStop(1,this.color);//外界的颜色
	ctx.globeAlpha=0.2;//透明度
	// Fill with gradient
	ctx.fillStyle=grd;//以渐变色填充小球


	ctx.arc(this.bx, this.by, this.r, 0, Math.PI * 2, true);//画圆函数

	ctx.fill()

	}

	ball.prototype.move = function () {//小球的移动方法

	this.bx += this.vx;

	this.by += this.vy;

	// ball.vy *= 0.99;
	// ball.vy += 0.25;
	if (this.by + this.vy > canvs.height \|\| this.by + this.vy < 0) {

	this.vy = -this.vy;//边界判定，到边界后反向弹
	//

	}
	if (this.bx + this.vx > canvs.width \|\| this.bx + this.vx < 0) {

	this.vx = -this.vx;
	// nball.color = '#' + ('00000' + ((Math.random() * 16777215)))
	}

	}

	function gogo(num) {
	num= num\|\|10;
	var globe = [];

	for (var i = 0; i < num; i++) {

	var nball = new ball();

	globe.push(nball)

	// nball.draw()

	}
	console.log(globe)
	function ballmove(){
	// ctx.fillStyle = 'rgba(255,255,255,0.3)';
	// ctx.fillRect(0, 0, canvs.width, canvs.height);
	ctx.clearRect(0, 0, canvs.width, canvs.height);
	for (var j = globe.length - 1; j >= 0; j--) {
	// globe[j].draw()

	globe[j].move();

	globe[j].draw()
	}
	window.requestAnimationFrame(ballmove)
	}
	ballmove()

	}
	gogo(100)

	// function drawcrc() {
	// // ctx.fillStyle = 'rgba(255,255,255,0.3)';
	// // ctx.fillRect(0, 0, canvs.width, canvs.height);
	// ctx.clearRect(0, 0, canvs.width, canvs.height);
	// var nball = new ball();
	// nball.draw();


	// window.requestAnimationFrame(drawcrc)
	// }
	// drawcrc();
	</script>
	</body>

	</html>