canvans画布随机生成圆圈

最新推荐文章于 2023-06-07 17:18:47 发布

BUG何处藏

最新推荐文章于 2023-06-07 17:18:47 发布

阅读量378

点赞数 1

分类专栏：前端学习文章标签： html 前端 css3

本文链接：https://blog.csdn.net/weixin_45847765/article/details/125520901

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用canvans生成50个圆随机排布，使用定时器自动生成，如下图所示效果：

实现代码如下：

<body>
		<canvas width="1000px" height="1000px" id="can1" style="border: 2px solid red;"></canvas>
	</body>
	<script>
		window.onload = function() {
			var myCan1 = document.getElementById("can1");
			var ctx = myCan1.getContext("2d");
			var t = 0;
			var id = setInterval(frame, 500);
			function frame() {
				if (t > 50) {
					clearInterval(id)
				} else {
					t++;
					var rx = Math.floor(Math.random() * 1000);
					var ry = Math.floor(Math.random() * 1000);
					var r = Math.floor(Math.random() * 40);
					
					var r1 = Math.floor(Math.random() * 255)
					var r2 = Math.floor(Math.random() * 255)
					var r3 = Math.floor(Math.random() * 255)
					ctx.beginPath(); //开始绘制
					ctx.arc(rx, ry, r, 0, 2 * Math.PI); //arc 的意思是“弧”
					ctx.fillStyle = `rgb(${r1},${r2},${r3})`
					ctx.fill(); //开始填充
					ctx.closePath();
				}
			}
			ctx.stroke(); 
			
		}
		
	</script>