canvas初学之——小球碰撞动画

沐音_000

已于 2024-05-17 18:07:51 修改

阅读量1.3k

点赞数

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

于 2018-07-27 11:01:32 首次发布

本文链接：https://blog.csdn.net/Yvonne_Lu7/article/details/81233437

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

小球碰撞动画

对于这个动画，涉及到的很多东西与之前的倒计时效果有很多相似之处，倒计时效果文章如下：

canvas初学之倒计时动画_炫丽的计时效果canvas绘图与动画基础　c语言-CSDN博客

而其中的新东西，第一是在canvas画布上添加其他的html元素，第二就是关于globalAlpha&globalCompositeOperation两个的运用。

我们首先来看看效果

小球本身一直在运动中（有点类似与电脑的气泡屏保），点击停止运动后，小球会停下来，按钮变为开始运动，而旁边两个按钮，一个为白色，一个为黑色，都是画布的背景色，默认是白色，黑色如下：

其中的效果为半透明的效果，这就是我们今天新提到的globalAlpha，这是用来设置全局图案透明度的。另一个globalCompositeOperation则是设置绘制图形在重叠时产生的效果（所有效果共有11种，本例中我们使用的是其中的‘lighter’,效果为当重叠时会重新计算颜色）。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小球碰撞动画</title>
	<style type="text/css">
		#canvas-wrapper{
			width: 1200px;
			height: 800px;
			position: relative;
			margin: 50px auto;
		}
		#canvas{
			border: 1px solid #aaa;
		}
		#controller{
			position: absolute;
			top: 30px;
			left: 30px;
			background-color: rgba(0,85,116,0.7);
			padding: 5px 20px 25px 20px;
			border-radius: 10px;
		}
		#controller h1{
			color: white;
			font-weight: bold;
			font-family: YouYuan;
		}
		#controller #canvas-btn{
			display: inline-block;
			background-color: #8b0;
			color: white;
			font-size: 14px;
			padding: 5px 15px;
			border-radius: 6px;
			text-decoration: none;
			margin-top: 10px;
			margin-right: 20px;
		}
		#controller #canvas-btn:hover{
			text-decoration: none;
			background-color: #7a0;
		}
		#controller .color-btn{
			display: inline-block;
			padding: 5px 15px;
			border-radius: 6px;
			font-size: 14px;
			margin-right: 5px;
			margin-top: 10px;
			text-decoration: none;
		}
		#controller .color-btn:hover{
			text-decoration: none;
		}
		#controller #white-color-btn{
			background-color: white;
		}
		#controller #black-color-btn{
			background-color: black;
		}
	</style>
</head>
<body>
	<div id="canvas-wrapper">
		<canvas id="canvas" style="display:block;border: 1px solid #aaa;margin: 50px auto">该浏览器不支持canvas，请更换浏览器后再试</canvas>
		<div id="controller">
			<h1>小球碰撞</h1>
			<a href="#" id="canvas-btn">停止运动</a>
			<a href="#" class="color-btn" id="white-color-btn">&nbsp</a>
			<a href="#" class="color-btn" id="black-color-btn">&nbsp</a>
		</div>
	</div>
	
	<script type="text/javascript">
		var balls = []

		var isMoving = true;
		var themeColor = 'white';

		window.onload = function(){

			var canvas = document.getElementById('canvas');

			canvas.width = 1200;
			canvas.height = 800;

			var cxt = canvas.getContext('2d');

			cxt.globalAlpha = 0.7;

			for (var i = 0; i < 100; i++) {
				
				var R = Math.floor(Math.random()*255);
				var G = Math.floor(Math.random()*255);
				var B = Math.floor(Math.random()*255);
				var radius = Math.random()*50+20;
				aBall = {
					color:'rgb(' + R +','+G+','+B+')',
					radius: radius,
					x: Math.random()*(canvas.width - 2*radius)+radius,
					y: Math.random()*(canvas.height - 2*radius)+radius,
					vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),
					vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))
				}
				balls[i] = aBall;



				

			}

			setInterval(
				function(){
					draw(cxt);
					if (isMoving) {
						update(canvas.width, canvas.height);
					}
				},
				50
			);

			document.getElementById('canvas-btn').onclick = function(event){
				if (isMoving) {
					isMoving = false;
					this.text = '开始运动';
				}
				else{
					isMoving = true;
					this.text = '停止运动';
				}
				return false;
			}

			document.getElementById('white-color-btn').onclick = function(event){
				themeColor = 'white';
				return false;
			}

			document.getElementById('black-color-btn').onclick = function(event){
				themeColor = 'black';
				return false;
			}
		}

		function draw(cxt){
			var canvas = cxt.canvas;
			cxt.clearRect(0,0,canvas.width,canvas.height);
			if (themeColor == 'black') {
				console.log('black theme');
				cxt.fillStyle = 'black';
				cxt.fillRect(0,0,canvas.width,canvas.height);
			}

			for (var i = 0; i < balls.length; i++) {
				cxt.globalCompositeOperation = 'lighter';
				cxt.fillStyle = balls[i].color;
				cxt.beginPath();
				cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0 ,Math.PI*2);
				cxt.closePath();
				cxt.fill()
			}
		}


		function update(canvasWidth, canvasHeight){
			for (var i = 0; i < balls.length; i++) {
				balls[i].x += balls[i].vx;
				balls[i].y += balls[i].vy;
				if (balls[i].x-balls[i].radius<=0) {
					balls[i].vx = -balls[i].vx;
					balls[i].x = balls[i].radius;
				}
				if (balls[i].x+balls[i].radius>=canvasWidth) {
					balls[i].vx = -balls[i].vx;
					balls[i].x = canvasWidth-balls[i].radius;
				}
				if (balls[i].y-balls[i].radius<=0) {
					balls[i].vy = -balls[i].vy;
					balls[i].y = balls[i].radius;
				}
				if (balls[i].y+balls[i].radius>=canvasHeight) {
					balls[i].vy = -balls[i].vy;
					balls[i].y = canvasHeight-balls[i].radius;
				}

			}
		}
	</script>
	</body>
</html>

沐音_000

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas初学之——小球碰撞动画

小球碰撞动画对于这个动画，涉及到的很多东西与之前的倒计时效果有很多相似之处，倒计时效果文章如下：https://blog.csdn.net/Yvonne_Lu7/article/details/81231255而其中的新东西，第一是在canvas画布上添加其他的html元素，第二...
复制链接

扫一扫