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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
js jquery数组介绍
Jul 15 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue实现div拖拽互换位置
Jul 29 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
python求众数问题实例
2014/09/26 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python下载网络小说实例代码
2018/02/03 Python
Python使用configparser库读取配置文件
2020/02/22 Python
详解python如何引用包package
2020/06/07 Python
python中pop()函数的语法与实例
2020/12/01 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
费用会计岗位职责
2014/01/01 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
5.12护士节活动总结
2015/02/10 职场文书
家长通知书家长意见
2015/06/03 职场文书
小马王观后感
2015/06/11 职场文书
大学生入党自传2015
2015/06/26 职场文书
七夕情人节问候语
2015/11/11 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis