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 13 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
webpack4.x开发环境配置详解
2018/08/04 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
javascript的this关键字详解
2019/05/20 Javascript
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
用Python制作音乐海报
2021/01/26 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
小学网上祭英烈活动总结
2014/07/05 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
聊聊redis-dump工具安装问题
2022/01/18 Redis