随机颜色

最新推荐文章于 2024-01-02 16:55:10 发布

S_1978P1

最新推荐文章于 2024-01-02 16:55:10 发布

阅读量777

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/S_1978P1/article/details/82145578

笔记专栏收录该内容

32 篇文章

订阅专栏

博客介绍了canvas入门知识，包括利用canvas标签创建画布，使用js代码画图。通过js里的随机数，实现画出大小、颜色、位置都随机的矩形，为canvas初学者提供了基础示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>