canvas学习笔记（一）：弹跳的小球

最新推荐文章于 2024-08-07 21:58:12 发布

w_tt

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量130

点赞数

分类专栏：前端文章标签： html5 javascript canvas

本文链接：https://blog.csdn.net/qq_36514197/article/details/120269075

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<canvas id="cont" width="500" height="500">您的浏览器版本过低！</canvas>

<script>
	
	/* 固定-start */
	var canvas = document.querySelector("#cont");
	var ctx = canvas.getContext("2d");
	
	// 画布宽高
	var w = 500,
		h = 500;
	
	function r(num) {
		return Math.random() * num;
	}
	
	// 随机小球对象
	function randomBall() {
		this.r = r(40) + 10; //[10, 50);
		this.x = r(5) + 50;
		this.y = r(3) + 50;
		this.color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
	
		this.xSpeed = r(3) + 2; //[2, 5)
		this.ySpeed = r(3) + 1; //[1, 4)	
	};
	
	// 展示小球方法
	randomBall.prototype.show = function() {
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
		ctx.fillStyle = this.color;
		ctx.fill();
	};
	
	// 小球运动方法
	randomBall.prototype.run = function() {
		if (this.x <= this.r || this.x + this.r >= w) {
			this.xSpeed = -this.xSpeed;
		}
		if (this.y <= this.r || this.y + this.r >= h) {
			this.ySpeed = -this.ySpeed;
		}
		this.x += this.xSpeed;
		this.y += this.ySpeed;
	}
	
	// 创造小球
	var ballArr = [];
	for (var i = 0; i <= 10; i++) {
		var ball = new randomBall();
		ballArr.push(ball);
	}
	
	// 定时器
	setInterval(function() {
		// 每次都先清除画布
		ctx.clearRect(0, 0, w, h);
		for (var i = 0; i < ballArr.length; i++) {
			var ball = ballArr[i];
			ball.run();
			ball.show();
		}
	}, 10);
	
</script>

</body>
</html>

w_tt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas学习笔记（一）：弹跳的小球

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body><canvas id="cont" width="500" height="500">您的浏览器版本过低！</canvas><script> /* 固定-start */ var canvas.
复制链接

扫一扫