星空背景

最新推荐文章于 2024-05-09 03:13:43 发布

王小怂爱吃肉

最新推荐文章于 2024-05-09 03:13:43 发布

阅读量1.1k

点赞数

分类专栏： js相关文章标签： js特效

原文链接：https://www.17sucai.com/pins/demo-show?id=23339

版权

js相关专栏收录该内容

7 篇文章 0 订阅

订阅专栏

星空背景

铺面而来的星空效果

// An highlighted block
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星空屏保</title>

<style>
html,
body {
  height: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif
}

#space {
  width: 100%
}

#warp {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 20px auto;
  color: rgba(209, 255, 255, 1);
  border: 2px solid;
  padding: 1em;
  width: 10em;
  text-align: center;
  font-weight: 700;
  font-size: 1.2em;
  display: inline-block;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.8)
}</style>
</head>
<body>

<canvas id="space"></canvas>

<a href="#" id="warp">WARP SPEED</a>

<script>
//based on an Example by @curran
window.requestAnimFrame = (function(){   return  window.requestAnimationFrame})();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");

var numStars = 1900;
var radius = '0.'+Math.floor(Math.random() * 9) + 1  ;
var focalLength = canvas.width *2;
var warp = 0;
var centerX, centerY;

var stars = [], star;
var i;

var animate = true;

initializeStars();

function executeFrame(){
  
  if(animate)
    requestAnimFrame(executeFrame);
  moveStars();
  drawStars();
}

function initializeStars(){
  centerX = canvas.width / 2;
  centerY = canvas.height / 2;
  
  stars = [];
  for(i = 0; i < numStars; i++){
    star = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      z: Math.random() * canvas.width,
      o: '0.'+Math.floor(Math.random() * 99) + 1
    };
    stars.push(star);
  }
}

function moveStars(){
  for(i = 0; i < numStars; i++){
    star = stars[i];
    star.z--;
    
    if(star.z <= 0){
      star.z = canvas.width;
    }
  }
}

function drawStars(){
  var pixelX, pixelY, pixelRadius;
  
  // Resize to the screen
  if(canvas.width != window.innerWidth || canvas.width != window.innerWidth){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    initializeStars();
  }
  if(warp==0)
  {c.fillStyle = "rgba(0,10,20,1)";
  c.fillRect(0,0, canvas.width, canvas.height);}
  c.fillStyle = "rgba(209, 255, 255, "+radius+")";
  for(i = 0; i < numStars; i++){
    star = stars[i];
    
    pixelX = (star.x - centerX) * (focalLength / star.z);
    pixelX += centerX;
    pixelY = (star.y - centerY) * (focalLength / star.z);
    pixelY += centerY;
    pixelRadius = 1 * (focalLength / star.z);
    
    c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
    c.fillStyle = "rgba(209, 255, 255, "+star.o+")";
    //c.fill();
  }
}

document.getElementById('warp').addEventListener("click",function(e){
  window.c.beginPath();
  window.c.clearRect(0, 0, window.canvas.width, window.canvas.height);
  window.warp = warp ? 0 : 1;
  executeFrame();
});

executeFrame();

</script>

</body>
</html>

在这里插入图片描述

王小怂爱吃肉

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
星空背景

星空背景铺面而来的星空效果// An highlighted block<!doctype html><html><head><meta charset="utf-8"><title>星空屏保</title><style>html,body { height: 100%; max-wi...
复制链接

扫一扫

专栏目录