JS实现动态星空背景效果

JS实现动态星空背景效果实现动态星空背景效果

主要为大家详细介绍了JS实现动态星空背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴

趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现动态星空背景的具体代码，供大家参考，具体内容如下

这里我截取的是一个图片，实际上是会动的。废话不多说，上代码。

HTML：

<canvas id="canvas"></canvas>

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;

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,

canvas2.width = 100;

canvas2.height = 100;

var half = canvas2.width / 2,

gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);

gradient2.addColorStop(0.025, '#CCC');

gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');

gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');

gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;

ctx2.beginPath();