canvas动画一流动的很多球

最新推荐文章于 2023-08-14 10:39:38 发布

雕琢时光纸戆

最新推荐文章于 2023-08-14 10:39:38 发布

阅读量227

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/103151097

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- //画布 -->
		<canvas id="c" width="500" height="500">
			<!-- 
			 1,画布需要获取上下文  canvas.getContent('2d')
			 2,画布如果width和height被重新赋值  需要清空画布
			 3,画圆（画弧）的方法 arc(x,y,r,bA,eA,s)x的位置，y的位置，半径，开始角结束角，顺时针或者逆时针
			 4,充填方法 c.fill(),画线方法 strock
			 5,为了防止每个图形之间相连着路径，用beginPath和closePath 来处理这个
			 6,画线方法 moveto起点 lineto终点,改变线段宽度linewidth
			 7，文本 c.filltext（内容，x，y）
			 8，矩形 fillreact（x,y,width,height）
			 
			 -->
		</canvas>
		<script type="text/javascript">
			//我们怎样处理多个园  用对象--把一些共同点提取出来
			//比如说 电脑  cpu 硬盘 键盘 鼠标等
			//圆  半径 颜色 速度等等
			//获取画布元素
			var canvas = document.getElementById('c')
			//产生随机颜色(失败了)
			var colors = function(){
				var r = Math.floor(Math.random()*255)
				var g = Math.floor(Math.random()*255)
				var b = Math.floor(Math.random()*255)
				var  str='rgb'+'('+r+','+g+','+b +')'
				return str
			}
			//nong一个对象用来new
			var Point = function() {
				this.r = Math.random() * 10 + 5
				this.color = colors()
				this.speed = Math.random() * 5 + 5
				this.x = Math.random() * canvas.width
			}
			var p1 = new Point()
			var p2 = new Point()
			//同一类
			var pArr = []
			for (var i = 0; i < 25; i++) {
				pArr.push(new Point())
				
			}

			//获取画布上下文 
			var c = canvas.getContext('2d')
			//画弧
			//中心加半径

			//c.arc(100,100,50,0,2*Math.PI,true)//x,y,radio startAg engAge true  横向位置 竖向位置 开始角 结束角 顺时针或者逆时针

			//var x = -50
			setInterval(function() {
				canvas.width = canvas.width
				for (var i = 0; i < pArr.length; i++) {
					var p = pArr[i]
					if (p.x >= canvas.width + p.r) {
						p.x = -p.r
					} else {
						p.x += p.speed
					}
				//c.beginPath()//开始路径
					c.fillStyle = p.color
					c.arc(p.x, 100, p.r, 0, 2 * Math.PI, true) //x,y,radio startAg engAge true  横向位置 竖向位置 开始角 结束角 顺时针或者逆时针
					c.fill()//填满
					//c.stroke()//只画路径 中间路径不断需要切断路径
					//c.closePath()//切断路径
				}

			}, 10)

			//充填方法
		</script>
	</body>
</html>

雕琢时光纸戆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas动画一流动的很多球

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body>  <canvas id="c" width="500" heig...
复制链接

扫一扫