随机颜色

最新推荐文章于 2023-04-19 17:59:43 发布

S_1978P1

最新推荐文章于 2023-04-19 17:59:43 发布

阅读量715

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/S_1978P1/article/details/82145578

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

canvas入门

利用canvas标签创建一个画布

利用js代码实现画图

利用js里面的随机数

画出一个个大小颜色位置都随机的矩形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>随机颜色</title>
	</head>
	<body>
		<!--创建canvas-->
		<canvas width="800px" height="800px" id="canvas"></canvas>
		
		<script type="text/javascript">
//			获取canvas
			var canvas = document.getElementById("canvas");
//			获取对象属性,2d
			var context = canvas.getContext("2d");
//			创建一个方法
			function color(){
//				利用随机数来设置坐标,宽高,颜色
				var x = Math.floor(Math.random()*800);
				var y = Math.floor(Math.random()*800);
				var w = Math.floor(Math.random()*800);
				var h = Math.floor(Math.random()*800);
				var r = Math.floor(Math.random()*256);
				var g = Math.floor(Math.random()*256);
				var b = Math.floor(Math.random()*256);
//				可以选择清除绘制	
				context.clearRect(0,0,800,800);
//				颜色随机
				context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
//				开始绘制
				context.fillRect(x,y,w,h);

				
			}
//			创建一个定时器,调用方法
			setInterval(color,100)
		</script>
	</body>
</html>