一. 效果图

二. 实现代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>星空宇宙背景特效</title><style>* {margin: 0;padding: 0;width: 100%;height: 100%;}.canvasContainer {width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div class="canvasContainer"><canvas id="canvas"></canvas></div><script>//宇宙特效"use strict";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 = 2500;//星星数量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 cachefunction 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) / 18;//星星大小this.orbitX = w / 2;this.orbitY = h / 2;this.timePassed = random(0, maxStars);this.speed = random(this.orbitRadius) / 500000;//星星移动速度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();</script></body></html>

special effects - 星空宇宙背景特效相关推荐

special effects - 蜘蛛网背景特效
蜘蛛网背景特效一. 效果图二. 实现代码一. 效果图二. 实现代码 <!DOCTYPE html> <html><head><meta http-eq ...
html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTML结果只需 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
【Unity Shader】Special Effects（一）UI特效的动画播放器
更新日期:2021年8月16日. Github源码:[点我获取源码] 索引 [系列简介] [SpecialEffects 模块简介] [UI特效的动画播放器] 下载SpecialEffects模块使 ...
html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析
简要教程这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTM ...
php+js+背景特效,基于canvas+html5炫酷星空背景动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: Warp drive是一个轻量级的jQuery插件.可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可 ...
canvas星空连线背景特效
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>can ...
canvas鼠标移动动态星空背景特效
在网上发现了一个挺好玩的canvas背景特效,先放上效果图. 这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接. 而且当鼠标移入时,鼠标指针一定 ...
android 加载动画效果_这效果炸了，网易云音乐“宇宙尘埃”特效
本文作者作者:Mlx 链接: https://juejin.im/post/6871049441546567688 本文由作者授权发布. 1前言前段时间,女朋友用网易云音乐的时候看到一个宇宙尘埃特 ...

special effects - 星空宇宙背景特效

星空宇宙背景特效

一. 效果图

二. 实现代码

special effects - 星空宇宙背景特效相关推荐

最新文章

热门文章