js实现旋转的星空效果
本文实例为大家分享了js实现旋转的星空效果的具体代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js canvas实现星空连线背景特效
本文实例为大家分享了js canvas星空连线背景的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>canvas星空连线背景特效</title> <style type="text/css"> body{ margin: 0; } #canvas{ display: block; background: #000; ma
-
js实现宇宙星空背景效果的方法
本文实例讲述了js实现宇宙星空背景效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
JS+canvas画布实现炫酷的旋转星空效果示例
本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果.分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项. 首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js <script s
-
JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下 这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: <canvas id="canvas"></canvas> CSS: /*css reset */ body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav { margin: 0; padding: 0; } html,body {
-
js实现漂亮的星空背景
本文实例为大家分享了js实现漂亮星空背景的具体代码,供大家参考,具体内容如下 html代码: <div class="stars"></div> css代码 html, body { height: 100%; overflow: hidden; } body { width: 100%; height:100%; background: #000; background-size: 100%; perspective: 500px; } .stars { po
-
js星空效果代码
星空效果_www.jb51.net ABCD [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
使用3D引擎threeJS实现星空粒子移动效果
three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象. 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl
-
js实现旋转的星空效果
本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta nam
-
jQuery实现炫丽的3d旋转星空效果
本文实例讲述了jQuery实现炫丽的3d旋转星空效果.分享给大家供大家参考,具体如下: 该特效也是在Jquery插件库中找到的,感觉效果不错,说不定以后项目中要有绚丽的星空背景,拿来即用,收藏了下. 下载解压后的目录结构 index.html页面代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=&
-
js+SVG实现动态时钟效果
本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <title>Analog Clock</title> <script> function updateTime() { var now = new Date(); // 当前时间 var min = now.
-
p5.js绘制旋转的正方形
使用p5.js绘制旋转的正方形,供大家参考,具体内容如下 要还原的效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. 首先建立画布大小,按照比例应该是5:3 function setup() { createCanvas(500, 300); } 设定矩形绘制格式,以及边线粗细 function setup() { createCanvas(500, 300); rectMode(100); strokeWeight(4); } 让我们根据画布坐标先把静态的图形画
-
p5.js临摹旋转爱心
运用p5.js临摹旋转爱心,供大家参考,具体内容如下 原图 我的临摹 效果不错的样子,让我们看看实现过程. 第一步.分析原图GIF 因为原图中旋转速度较快,无法用肉眼直观地找到规律.所以我把gif分解,共90帧,一帧一帧的寻找旋转规律. 从上往下顺序,第一层到第六层.从简单的说起. 第六层:逆时针匀速旋转一圈. 第五层:先逆时针旋转α,速度由v1变为0.再顺时针旋转180°+2α,速度由0变为v2,再变为0.最后逆时针旋转α,速度由0变为v1.(观察原图,我将α设为30°0) 第四层:先逆时针旋
-
JS Canvas接口和动画效果大全
概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id
-
如何利用JS实现时间轴动画效果
目录 css动画 什么是时间轴动画? 动画对象 动画函数 思考 总结 css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { width: 100px; height: 100px; background: red; animation: changeColor 2s; } @keyframes changeColor { 0% {background: red;} 50% {background: yellow;} 100% {
-
基于Two.js实现星球环绕动画效果的示例
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 效果如下: 下面是核心js code HTML就不贴了,需要引入two.js文件