canvas 实现一片星空

最新推荐文章于 2024-05-29 17:25:33 发布

Lucky_ze

最新推荐文章于 2024-05-29 17:25:33 发布

阅读量254

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Lucky_ze/article/details/105090371

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		<style>
			
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1200" height="800"></canvas>       <!-- 规定画布大小，不要写在style中。 -->
		<script>		
			window.onload = function(){                               //加载画布
				var canvas = document.getElementById('canvas');		  //获取画布
				var context = canvas.getContext("2d");				  //画布上下文环境
				
				var skyStyle=context.createLinearGradient(0,0,0,canvas.height);   // 创建渐变
				skyStyle.addColorStop(0,"black");
				skyStyle.addColorStop(1,"#035");	 
				
				context.fillStyle=skyStyle;                           // 填充渐变
				context.fillRect(0,0,canvas.width,canvas.height);     //填充区域
				
				for(var i = 0;i<200;i++){                             //绘制星星的随机数变量设置
					var r = Math.random()*5+5;
					var x = Math.random()*canvas.width;
					var y = Math.random()*canvas.height*0.65;         //0.65规定显示区域在百分之六十五区域内显示
					var a = Math.random()*360;                        //旋转角度的随机值
					drawStar(context , x, y, r , a);                  //传入绘制星星的函数
				}
				
				fillMoon(conte

最低0.47元/天解锁文章

Lucky_ze

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 实现一片星空

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> </style> </head> <body> <canvas id="canva...
复制链接

扫一扫