js实现旋转的星空效果_javascript技巧

来源:脚本之家  责任编辑:小易  

可以的!我原来看到过一个这样的网站。不过本人没有这样的js文件www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下

搞个gif图片就行了,分数可以追加上去,gif多弄几个不同颜色的,因为不同的分数对应着不同的颜色

<!DOCTYPE HTML><html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="starry sky"> <meta name="description" content="the starry sky"> <title>旋转的星空(the starry sky)</title> <style> body { margin: 0; padding: 0; overflow: hidden; } #canvas { position: absolute; left: 0; } #starCanvasDiv { background-color: white; } </style> </head> <body> <canvas id="canvas">Your browser can not support canvas</canvas> <script> var doublePI = Math.PI * 2; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cx,cy; var starCanvas; var alphaChangeProbability = new AlphaChangeProbability(); //色相 var hue = 217; //星空背景颜色 var bgColor = 'hsl(' + hue + ', 60%, 5%)'; //画布的外切圆半径 var canvasRadius; //每旋转一圈要需要的帧数 var radianStepCount; //星星的总个数 var starCount; //群星 var stars; function onResize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; cx = canvas.width / 2; cy = canvas.height / 2; canvasRadius = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2)) / 2; radianStepCount = canvasRadius * 100; starCount = parseInt((canvas.width + canvas.height) * 0.5); stars = []; for(var i=0; i<starCount; i++) { stars.push(new Star()); } //初始时要先绘制一层背景,否则第一波星星走过的路径会有画布底料涂抹不均匀的感觉 ctx.globalCompositeOperation = "source-over"; ctx.globalAlpha = 1; ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); } function init() { createStarCanvas(); window.addEventListener("resize", onResize); onResize(); loop(); } //在[min, max)范围内随机一个整数 function randomInt(min, max) { if(arguments.length === 1) { max = min; min = 0; } else if(min > max) { var tmp = max; mix = min; min = tmp; } return Math.floor(Math.random() * (max - min) + min); } //透明度改变的概率 function AlphaChangeProbability() { //透明度改变的步长 var alphaStep = 0.05; //透明度增加 var plus = 1; //透明度减少 var minus = 1; //透明度不变 var invariant = 8; //总概率 var totalChance = plus + minus + invariant; //获取随机的透明度改变值 function getRandomChangeValue() { var value = Math.random() * totalChance; if(value < plus) { return alphaStep; } value -= plus; if(value < minus) { return -alphaStep; } return 0; } //随机改变alpha的值 this.randomChangeAlpha = function(alpha) { alpha += getRandomChangeValue(); if(alpha > 1) { alpha = 1; } else if(alpha < 0) { alpha = 0; } return alpha; } } //创建星星图片 function createStarCanvas() { starCanvas = document.createElement("canvas"); var ctx = starCanvas.getContext("2d"); starCanvas.width = 100; starCanvas.height = 100; var cx = starCanvas.width / 2; var cy = starCanvas.height / 2; var radius = Math.max(cx, cy); var gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius); gradient.addColorStop(0.025, '#CCC'); gradient.addColorStop(0.1, 'hsl(' + hue + ', 65%, 35%)'); gradient.addColorStop(0.25, bgColor); gradient.addColorStop(1, "transparent"); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, doublePI); ctx.fill(); } //星体对象 var Star = function() { //星体运行的轨道半径 this.orbitRadius = Math.random() * canvasRadius; //星体的半径 this.radius = randomInt(60, this.orbitRadius) / 8; //星体透明度 this.alpha = Math.random(); //相对轨道中心(即画布中心)的角度 this.theta = Math.random() * doublePI; //角速度 this.speed = Math.random() * this.orbitRadius / radianStepCount; //获取当前坐标 this.getPos = function() { return { x: cx + this.orbitRadius * Math.cos(this.theta), y: cy + this.orbitRadius * Math.sin(this.theta) } } } Star.prototype.update = function() { this.alpha = alphaChangeProbability.randomChangeAlpha(this.alpha); this.theta += this.speed; this.pos = this.getPos(); } Star.prototype.draw = function() { ctx.globalAlpha = this.alpha; ctx.drawImage(starCanvas, this.pos.x, this.pos.y, this.radius, this.radius); } function loop() { ctx.globalCompositeOperation = "source-over"; ctx.globalAlpha = 0.5; ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; for(var i = 0; i < stars.length; i++) { stars[i].update(); stars[i].draw(); } //绘制星体图样 ctx.globalCompositeOperation = "source-over"; ctx.globalAlpha = 1; ctx.fillStyle = "white"; ctx.fillRect(0, 0, starCanvas.width, starCanvas.height); ctx.drawImage(starCanvas, 0, 0, starCanvas.width, starCanvas.height); requestAnimationFrame(loop); } init(); </script> </body></html>

rotate的作用是平面旋转,是个css样式,比如顺时针旋转45度 className{ transform:rotate(45deg);}

很简单啊不用js也能做出来啊!用js操作这个正方形的样式,实现旋转一圈,然后封装成一个函数,每隔多长时间调用一次。具体的旋转一周的时间与函数的调用时间可以做到无缝,这个你要自己调试了(简单的实现思路)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js实现漂亮的星空背景
  • js实现动态星空背景效果
  • js+canvas画布实现炫酷的旋转星空效果示例
  • 使用3d引擎threejs实现星空粒子移动效果
  • js实现宇宙星空背景效果的方法
  • js星空效果代码
  • js canvas实现星空连线背景特效
  • javascript设计模式之单例模式简单实例教程
  • 微信小程序顶部导航栏可滑动并选中放大
  • js实现json数组分组合并操作示例
  • 判断目标是否是window,document,和拥有tagname的element的代码
  • javascript优化技巧(文件瘦身篇)
  • js动态加载以及确定加载完成的代码
  • 关于http传输中gzip压缩的秘密探索分析
  • 深入理解javascript中的valueof与tostring
  • js自定义对象创建与简单使用方法示例
  • 优化innerhtml操作(提高代码执行效率)
  • 如何用js做出正方形无限旋转的效果
  • 你好,您那有用JS实现图片立体旋转的效果吗,可以分享吗
  • js 怎么实现点击一次图片旋转90度,再点击再转90度呢
  • 求教js实现图片的旋转
  • 用js如何实现这样的效果,就像360安全卫士里面的那个旋转控件
  • 恳请大家帮帮忙,关于用js控制3D旋转
  • 如何实现Three.js中的模型世界轴旋转和自旋转
  • 怎么用js制作一个骰子,点击是可以自动旋转并随机获得一个点数(图片我
  • HTML中,怎样将图片旋转90度显示
  • 怎样写一个js事件实现导入模型按输入数值旋转
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs实现漂亮的星空背景js实现动态星空背景效果js+canvas画布实现炫酷的旋转星空效果示例使用3d引擎threejs实现星空粒子移动效果js实现宇宙星空背景效果的方法js星空效果代码js canvas实现星空连线背景特效javascript设计模式之单例模式简单实例教程微信小程序顶部导航栏可滑动并选中放大js实现json数组分组合并操作示例判断目标是否是window,document,和拥有tagname的element的代码javascript优化技巧(文件瘦身篇)js动态加载以及确定加载完成的代码关于http传输中gzip压缩的秘密探索分析深入理解javascript中的valueof与tostringjs自定义对象创建与简单使用方法示例优化innerhtml操作(提高代码执行效率)js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包js获取url参数的使用扩展实例浅析javascript异步执行函数导致的变量变javascript 动态将数字金额转化为中文大写父元素与子iframe相互获取变量和元素对象js 提交form表单和设置form表单请求路径的拖动table标题实现改变td的大小(css+js代layui switch 开关监听 获取属性值、更改区分中英文字符的两种方法(正则和charcodjs针对浏览器窗口关闭事件的监听方法集锦javascript代码在ie8里报错 document.get
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved