canvas绘制动态小球

最新推荐文章于 2023-01-09 19:58:39 发布

superXiaoyun

最新推荐文章于 2023-01-09 19:58:39 发布

阅读量143

点赞数

文章标签： canvas javascript css

本文链接：https://blog.csdn.net/superXiaoyun/article/details/116093471

版权

canvas绘制动态小球

<!DOCTYPE html>
<html>
<head>
	<title>canvas绘制动态小球</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<style type="text/css">
		.inline {
			display: list-item;
		}
		body {
			margin: 0
		}
		canvas {
			border: 1px solid #999;
		}

	</style>

	<script type="text/javascript">
		var a;
		$(function() {
			a = $("#select")
			console.log(a)
		})
		function change() {
			console.log(a.val())
		}
	</script>
</head>
<body>
	<canvas id="mycanvas"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('mycanvas')
		var ctx = canvas.getContext('2d')
		canvas.width = document.documentElement.clientWidth
		canvas.height = document.documentElement.clientHeight

		var ballArr = []

		function Ball(x, y, r, color) {
			this.x = x
			this.y = y
			this.r = r
			this.color = color
			this.dx = parseInt(Math.random() * 10) - 5 
			this.dy = parseInt(Math.random() * 10) - 5
			if(ballArr)ballArr.push(this)
		}
		Ball.prototype.update = function() {
			this.x += this.dx
			this.y += this.dy
			this.r -= 1
		}
		Ball.prototype.render = function() {
			ctx.beginPath()
			ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true)
			ctx.fillStyle = this.color
			ctx.fill()
		}
		function getColor() {
			var color = '#'
			var arrStr = "1,2,3,4,5,6,7,8,9,A,B,C,D,E,F"
			var arr = arrStr.split(',')
			for (var i = 0; i < 6; i++) {
				color += arr[parseInt(Math.random() * arr.length)]
			}
			return color
		}
		setInterval(() => {
			ctx.clearRect(0, 0, canvas.width, canvas.height)
			console.log(ballArr.length)
			for (var i = 0; i < ballArr.length; i++) {
				ballArr[i].render()
				ballArr[i].update()
				if(ballArr[i].r < 0) {
					ballArr.splice(i, 1)
				}
			}
		}, 30)
		document.addEventListener('mousemove', function(e) {
			new Ball(e.offsetX, e.offsetY, 30, getColor())
		})
	</script>
</body>
</html>```