璀璨星空特效展示，前后端源码附效果截图

最新推荐文章于 2024-03-15 19:31:50 发布

魔法程序员

最新推荐文章于 2024-03-15 19:31:50 发布

阅读量2.8k

点赞数 1

分类专栏：学习交流文章标签： web前端学习交流

本文链接：https://blog.csdn.net/python_asd/article/details/102585780

版权

各位想一起交流学习web前端的小伙伴可以进裙：619596o65和众多小伙伴一起交流学习哟~
效果展示图：
在这里插入图片描述
html文件

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>IT'S FULL OF STARS</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

  <canvas id="canvas" width="1400" height="600"></canvas>

  <script  src="js/script.js"></script>

</body>
</html>

css文件：
body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; }
JS文件：

var canvas = document.getElementById("canvas");

const mobile = ( navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Initialize the GL context
var gl = canvas.getContext('webgl');
if(!gl){
   
  console.error("Unable to initialize WebGL.");
}

var layers_ = 10;

if(mobile){
   
	layers_ = 6;
}

//Time step
var dt = 0.015;
//Time
var time = 0.0;

//************** Shader sources **************

var vertexSource =

最低0.47元/天解锁文章

魔法程序员

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
璀璨星空特效展示，前后端源码附效果截图

各位想一起交流学习web前端的小伙伴可以进裙：834349641和众多小伙伴一起交流学习哟~效果展示图：html文件<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>IT'S FULL OF STARS</title>&lt...
复制链接

扫一扫

专栏目录