js使用canvas画五角星以及渐变色，瞎画_3d五角星代码js+html代码

作者：Monodyee | 2024-02-15 13:48:41

踩

3d五角星代码js+html代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>星云图</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid black; margin: 20px auto;"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas")
		canvas.width = 1400
		canvas.height = 700
		var a1 = canvas.getContext("2d")
		a1.beginPath()
		a1.fillStyle="#000020"
		a1.fillRect(0,0,1400,700)
		a1.stroke()
		for(var i=0;i<600;i++){
			var banjing = Math.random()*5+5
			var heng = Math.random()*canvas.width
			var zong = Math.random()*canvas.height
			var dushu = Math.random()*360
			star(a1,1,2,heng,zong,'yellow',"white",dushu)
		}
		function star(a,r,R,x,y,color,bgcolor,du){
			a.beginPath()
			for(var i=0;i<5;i++){
				a.lineTo(Math.cos((18+72*i-du)/180*Math.PI)*R+x,
						 -Math.sin((18+72*i-du)/180*Math.PI)*R+y,
				)
				a.lineTo(Math.cos((54+72*i-du)/180*Math.PI)*r+x,
						 -Math.sin((54+72*i-du)/180*Math.PI)*r+y,
				)
			}
			a.strokeStyle = color
			a.fillStyle = bgcolor
			a.fill()
			a.shadowOffsetX = 0
			a.shadowOffsetY = 0
			a.shadowBlur = 20
			a.shadowColor = "rgb(0,0,0)"
			a.closePath()
			a.stroke()
		}
		a1.beginPath()
		a1.arc(1250,1650,1500,0,2*Math.PI,false)
		a1.strokeStyle="#000030"
		var jianbian = a1.createRadialGradient(700,450,0,700,200,700)
		jianbian.addColorStop(0.0,"#fbe3e3")
		jianbian.addColorStop(0.1,"#4f1603")
		jianbian.addColorStop(0.2,"#a25d56")
		jianbian.addColorStop(0.3,"#431000")
		jianbian.addColorStop(0.45,"#662414")
		jianbian.addColorStop(0.55,"#a67a6d")
		jianbian.addColorStop(0.6,"#5a2211")
		jianbian.addColorStop(0.65,"#a67a6d")
		jianbian.addColorStop(0.75,"#4f1603")
		jianbian.addColorStop(0.9,"#280a00")
		jianbian.addColorStop(1,"#431000")
		a1.fillStyle = jianbian
		a1.fill()
		a1.stroke()
	</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/84993