Canvas<星空流星效果>
2020-03-10 本文已影响0人
誰在花里胡哨
效果图：
start.gif
🎈参考效果地址：https://www.jq22.com/code922
🎈下面对实现流星效果部分的说明，可能对你有帮助
image.png
🎈如果在绘制时，3个点默认会形成一个填充图形，所以下面用到了3点坐标位置进行了绘制，在绘制完成之后，进行 canvas.createRadialGradient 渐变色的使用实现流星尾迹的效果
image.png
var wX = x + (Math.cos(range) * liuLength);
var wY = y + (Math.sin(range) * liuLength);
var x1 = x + 20;
var y1 = y;
var x2 = x;
var y2 = y - 20;
//canvas createRadialGradient 渐变
// https://www.w3school.com.cn/tags/canvas_createradialgradient.asp
// addColorStop 0 ~ 1的范围
var rad = ctx.createRadialGradient(x, y, 0, x, y, liuLength);
rad.addColorStop(0, 'rgba(255,255,255,0.8)');
rad.addColorStop(0.1, 'rgba(255,255,255,0.2)');
rad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = rad;
image.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
background: #000000;
overflow: hidden;
}
#canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d");
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;
// https://www.w3school.com.cn/jsref/jsref_atan.asp
// atan() 方法可返回数字的反正切值。
// 因为流星画线部分坐标为 (0,-2) (2,0)
var range = Math.atan(-1);
let starArray = []; //星星数组
var liuArray = []; //流星数组
var liuLength = 200; //可控制流星尾迹长短
//获取一个随机的整数
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//定义一个随机颜色
function rndCol() {
var r = Math.random() * 1;
return `hsla(0, 0%, 100%, ${r})`;
}
//首先创建星星的位置等属性，并添加到数组当中
function save_star() {
for (let i = 0; i < 200; i++) {
let star = {
x: random(0, w),
y: random(0, h),
r: random(1, 2),
c: rndCol()
}
starArray.push(star)
}
}
save_star()
//通过根据不同位置的星星绘制不同样式的圆，实现闪烁效果
function draw() {
ctx.clearRect(0, 0, w, h);
//绘制流星部分---------------------------------
//判断条件越小 符合条件的越多，每次出现的流星个数更多
if (Math.random() > 0.98) {
//随机生成一个 400 ~ 窗口宽 的流星坐标位置
//每个流星的y轴坐标起始点为 0
var a = Math.random() * (w - 400) + 400;
liuArray.push({
x: a,
cX: a
});
}
//设置流星的最大限度为 20
while (liuArray.length > 20) {
liuArray.shift()
}
for (let i = 0; i < liuArray.length; i++) {
// 每次偏移 10 ，可控制流星速度
liuArray[i].cX -= 10;
liuX(liuArray[i].cX, liuArray[i].x)
}
//绘制星星部分---------------------------------
for (let i = 0; i < starArray.length; i++) {
starArray[i].r += Math.random() * 2 - 1
//定义最大值和最小值，避免当随机数为负数时报错
starArray[i].r = Math.max(0, starArray[i].r)
starArray[i].r = Math.min(2, starArray[i].r)
let r = starArray[i].r
ctx.beginPath();
ctx.fillStyle = starArray[i].c;
ctx.arc(starArray[i].x, starArray[i].y, r, 0, Math.PI * 2); //绘制圆球
ctx.shadowBlur = 10;
ctx.shadowColor = '#ffffff';
ctx.fill();
}
}
//绘制流星方法
function liuX(x, sX) {
//y坐标位置为之前 每次的 -=10 ，因为x sX 开始的时候是相等的，所以y起始坐标为0
var y = sX - x;
var wX = x + (Math.cos(range) * liuLength);
var wY = y + (Math.sin(range) * liuLength);
var x1 = x + 2;
var y1 = y;
var x2 = x;
var y2 = y - 2;
//canvas createRadialGradient 渐变
// https://www.w3school.com.cn/tags/canvas_createradialgradient.asp
// addColorStop 0 ~ 1的范围
var rad = ctx.createRadialGradient(x, y, 0, x, y, liuLength);
rad.addColorStop(0, 'rgba(255,255,255,0.8)');
rad.addColorStop(0.1, 'rgba(255,255,255,0.2)');
rad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = rad;
ctx.beginPath()
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(wX, wY);
ctx.closePath();
ctx.fill();
}
function animation() {
//每一帧进行绘制
window.requestAnimationFrame(animation)
draw()
}
animation()
</script>
</html>
