JS实现动态星空背景效果实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码，供大家参考，具体内容如下
这里我截取的是一个图片，实际上是会动的。废话不多说，上代码。
HTML：
<canvas id="canvas"></canvas>
CSS：
/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
body {
font: 14px Microsoft YaHei;
-webkit-text-size-adjust:100%;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
position: relative;
background: #000;
}
#canvas {
width: 100%;
height: 100%;
display: block;
opacity: .8;
}
JS：
// 音量大小,0.01-1
//宇宙特效
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 1100; //星星数量,默认1300
评论0