HTML+JS实现星空背景

2024-06-28 15:00| 来源: 网络整理| 查看: 265

HTML+JS 实现星空背景

查看效果：http://lsy.deld.vip/article/show/24.html

第一步 html:

创建画布 canvas 并设置 id 为 starfield（设置 id 是为了后面写 js 方便获取到画布标签）

DOCTYPE html> Html+js 实现星空背景第二步 css:

为画布标签设置定位，坐标为(0,0)；排版 z-index: -1（保证画布处于最底层作为背景）

canvas{ position:fixed;/*设置定位*/ top:0; left:0; z-index:-1;/*使画布基于最低层*/ background:#0e1729;/*画布背景色*/ } 第三步 js: var canvas; var stars_count; var stars; ini(); makeStars(); var interval=setInterval(function(){drawStars();},50);//定时刷新星星数据 function ini(){//初始化 canvas = document.getElementById("starfield"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; context = canvas.getContext("2d"); stars = Array();//数组存放随机生成的星星数据（x,y,大小，颜色，速度） stars_count = 300;//星星数量 clearInterval(interval); } function makeStars(){//随机生成星星数据 for(var i=0;i'x':x,'y':y,'radius':radius,'color':color,'speed':speed};//（x,y,大小，颜色，速度） stars.push(arr);//随机生成的星星数据存在这里 } } function drawStars(){//把星星画到画布上 context.fillStyle = "#0e1729"; context.fillRect(0,0,canvas.width,canvas.height); for (var i = 0; i //窗口大小发生变化时重新随机生成星星数据 ini(); makeStars(); interval=setInterval(function(){drawStars();},50); }

【本文地址】

公司简介

联系我们