JS+canvas画布实现炫酷的旋转星空效果示例


Posted in Javascript onFebruary 13, 2019

本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果。分享给大家供大家参考,具体如下:

canvas是html5的新标签,其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性。这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项。

首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="canvas/cosmos_canvas.js" type="text/javascript" charset="utf-8"></script>

HTML,当然如果浏览器不支持canvas的话,运行程序没效果,并显示“该浏览器不支持canvas”

<canvas id="starts">该浏览器不支持canvas</canvas>

cosmos_canvas.js脚本

function canvas(id,starscolor,starsamount,starsradius,movrange,speed,trailing){
  //宇宙特效
"use strict";
var canvas = document.getElementById(id),
 ctx = canvas.getContext('2d'),
 w = canvas.width = window.innerWidth,
 h = canvas.height = window.innerHeight,
 hue = starscolor,//230
 stars = [],
 count = 0,
 maxStars = starsamount;//星星数量
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 / movrange;
 //星星移动范围,值越大范围越小,
}
var Star = function() {
 this.orbitRadius = random(maxOrbit(w, h));
 this.radius = random(starsradius, this.orbitRadius) / 8;
 //星星半径大小
 this.orbitX = w / 2;
 this.orbitY = h / 2;
 this.timePassed = random(0, maxStars);
 this.speed = random(this.orbitRadius) / speed;
 //星星移动速度
 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 = trailing; //尾巴
 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();
}

调用方法:这里没写任何样式所以默认情况下是全屏效果

$(function(){
//canvas的id名,星星颜色(hsla的hue色调),星星数量,星星半径比,星星移动范围(值越大范围越小),星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
canvas("starts",230,1000,60,2,50000,0.5);
});

效果:

JS+canvas画布实现炫酷的旋转星空效果示例

然后我再加3个canvas,改些参数做效果对比吧

HTML

<canvas id="starts">该浏览器不支持canvas</canvas>
<canvas id="starts1">该浏览器不支持canvas</canvas>
<canvas id="starts2">该浏览器不支持canvas</canvas>
<canvas id="starts3">该浏览器不支持canvas</canvas>

javascript

$(function(){
  //canvas的id名,星星颜色(hsla的hue色调),星星数量,星星半径比,星星移动范围(值越大范围越小),星星移动速度(值越大速度越慢),星星拖尾效果(0~1值越小拖尾越明显)
  canvas("starts",230,1000,60,2,50000,0.5);
  canvas("starts1",160,800,70,2.5,55000,0.4);
  canvas("starts2",80,600,80,3,60000,0.3);
  canvas("starts3",0,400,90,3.5,65000,0.2);
  $("canvas").width($(window).width()/2);
  $("canvas").height($(window).height()/2);
  $("canvas").css("float","left");
});

就这样,四个浩瀚的宇宙出来了

JS+canvas画布实现炫酷的旋转星空效果示例

更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 #Javascript
Vue中CSS动画原理的实现
Feb 13 #Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 #Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 #Javascript
node.js微信小程序配置消息推送的实现
Feb 13 #Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
很可爱的输入框
2008/08/03 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
详解python metaclass(元类)
2020/08/13 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
internal修饰符起什么作用
2013/12/16 面试题
高三自我鉴定
2013/10/23 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
个人简历自荐信
2013/12/05 职场文书
环保建议书400字
2014/05/14 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书