流星效果

最新推荐文章于 2023-06-27 14:21:05 发布

like419

最新推荐文章于 2023-06-27 14:21:05 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/like419/article/details/103179631

版权

<!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;

}

canvas {
border: 1px solid red;
}
</style>
</head>

<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;

let sx = 10,
sy = 10,
cx1 = 50,
cy1 = 10,
cx2 = 150,
cy2 = 500,
ex = 500,
ey = 500,
t = 0,
n = 200;
let bubbles = [{ a: 1, x: 1, y: 1, r: 4, s: 1 }];

let moveArr = [{
sx: 20,
sy: 20,
ex: 200,
ey: 10,
time: 200,
}, {
sx: 200,
sy: 10,
ex: 200,
ey: 200,
time: 100,
}]
let currentMoveIndex = 0;

let bubbleNum = 0;

for (var i = 0; i < bubbles.length; i++) {
bubbles[i].a = (i + 1) * 0.02;
bubbles[i].s = (i + 1) * 0.02;
}
let b = { a: 1, s: 1, x: x, y: y };
bubbles.push(b);
//渲染bubble数组
for (let j = 0; j < bubbles.length; j++) {
let b = bubbles[j];
ctx.save();
ctx.beginPath();
ctx.globalAlpha = b.a; // 值是0-1,0代表完全透明，1代表完全不透明
ctx.fillStyle = 'greenyellow';
ctx.arc(b.x, b.y, b.s * 3, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
}

console.log(t);
requestAnimationFrame(test);
}

let obj = moveArr[currentMoveIndex];
sx = obj.sx;
sy = obj.sx;
ex = obj.ex;
ey = obj.ey;
t = 0;

test();
</script>
</body>

</html>

like419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
流星效果

<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { padding: 0;...
复制链接

扫一扫

流星效果

“相关推荐”对你有帮助么？