JS实现动态星空背景效果
2019-11-01 18:06
1786 查看
本文实例为大家分享了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 var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d'); 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(); ctx2.arc(half, half, half, 0, Math.PI * 2); ctx2.fill(); // End cache function random(min, max) { if (arguments.length < 2) { max = min; min = 0; } if (min > max) { var hold = max; max = min; min = hold; } return Math.floor(Math.random() * (max - min + 1)) + min; } function maxOrbit(x, y) { var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max)); return diameter / 2; //星星移动范围,值越大范围越小, } var Star = function() { this.orbitRadius = random(maxOrbit(w, h)); this.radius = random(60, this.orbitRadius) / 10; //星星大小,值越大星星越小,默认8 this.orbitX = w / 2; this.orbitY = h / 2; this.timePassed = random(0, maxStars); this.speed = random(this.orbitRadius) / 80000; //星星移动速度,值越大越慢,默认5W this.alpha = random(2, 10) / 10; count++; stars[count] = this; } Star.prototype.draw = function() { var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, twinkle = random(10); if (twinkle === 1 && this.alpha > 0) { this.alpha -= 0.05; } else if (twinkle === 2 && this.alpha < 1) { this.alpha += 0.05; } ctx.globalAlpha = this.alpha; ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius); this.timePassed += this.speed; } for (var i = 0; i < maxStars; i++) { new Star(); } function animation() { ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 0.5; //尾巴 ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'; ctx.fillRect(0, 0, w, h) ctx.globalCompositeOperation = 'lighter'; for (var i = 1, l = stars.length; i < l; i++) { stars[i].draw(); }; window.requestAnimationFrame(animation); } animation();
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- js实现宇宙星空背景效果的方法
- js实现宇宙星空背景效果的方法
- js实现仿网易点击弹出提示同时背景变暗效果
- js实现漂亮的星空背景
- 纯js实现背景图片切换效果代码
- JS时间控制实现动态效果的实例讲解
- jQuery动态背景图片效果实现方法
- js 动态加入input效果实现
- js实现往表格动态添加学生的学号、姓名、语数英的考试成绩和总分(总分不是填写),实现行与行之的颜色相间,高光的效果
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
- 网页背景动态线条 鼠标吸附动态线条效果的实现
- js实现textarea的剩余字数动态提示效果demo
- CSS3实现多背景模拟动态边框的效果
- js+canvas实现动态吃豆人效果
- JS动态实现遮盖网页效果
- 利用JS实现动态进度条效果
- JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
- 利用JQuery和JS实现奇偶行背景颜色自定义效果
- JS实现:点击后,图片弹出放大,背景变黑的效果
- JavaScript生成的动态下雨背景效果实现方法