1、html
<body>
<canvas id='canvas'></canvas>
</body>
2、css
//清除默认样式
* {
margin: 0;
padding: 0;
}
//设置画布的颜色
canvas {
background-color: #000;
display: block;
}
3、JS(重点)
var num = 150; //星星数
var star = []; //星星位置
var canvas = document.getElementById("canvas");
//获取上下文
var ctx = canvas.getContext("2d");
//使画布铺满整个屏幕
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
// 创建星星
for (let i = 0; i < num; i++) {
star[i] = {
x: Math.random() * w,
y: Math.random() * h,
x0: Math.random() * 0.5 - 0.25,
y0: Math.random() * 0.5 - 0.25,
};
drawStar(star[i].x, star[i].y);
}
//绘制星星
function drawStar(x, y, starSize = 1.5, starColor = "white&#