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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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
PHP开发大型项目的一点经验
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python中turtle作图示例
2017/11/15 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
python 消费 kafka 数据教程
2019/12/21 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
2019年Java面试必问之经典试题
2012/09/12 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
投标担保书范文
2014/04/02 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
销售代理协议书
2014/09/30 职场文书