<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
canvas {
height: 100%;
}
</style>
</head>
<body>
<canvas>您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
window.onload = function() {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var t = 0;
ctx.width = canvas.width = window.innerWidth;
ctx.height = canvas.height = window.innerHeight;
window.addEventListener('resize', () => {
ctx.width = window.innerWidth;
ctx.height = window.innerHeight;
}, false)
function draw() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
ctx.fillRect(0, 0, ctx.width, ctx.height);
var ds, i, j, r;
ds = Math.cos(t) * 2 * Math.PI;
for (var i = 0; i < 300; i++) {
r = 400 * Math.sin(i * ds);
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.fillStyle = `hsla(0, ${Math.random() * 100}%, ${Math.random() * 100}%, 1)`;
ctx.arc(Math.sin(i)*r + (ctx.width / 2),
Math.cos(i) * r + (ctx.height / 2),
1.5, 0, Math.PI * 2
);
ctx.fill();
}
t += 0.0002;
return t %= 2 * Math.PI;
}
function start() {
window.requestAnimationFrame(start);
draw()
}
start()
}
</script>
</body>
</html>
canvas随便粒子特效
最新推荐文章于 2023-04-26 17:28:52 发布