<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
body{
background: #45aad7;
margin: 0%;
padding: 0%;
}
html,body{
width: 100%;
height: 100%;
}
#myCanvas{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var particles = [];
for(var i = 0; i < 500; i++){
particles.push({ //雪花在x y 上的位置和速度,以及雪花的大小和颜色
x: Math.random()*window.innerWidth,
y: Math.random()*window.innerHeight,
vx: (Math.random()*1-.5),
vy: (Math.random()*1-.5),
size: 1+Math.random()*2,
// color: "#FFF"
color:'#'+('0000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)
});
}
function timeUpdata(e){
/*清楚画布区域*/
context.clearRect(0,0,window.innerWidth,window.innerHeight);
/*逐一绘制500片雪花*/
var len = particles.length;
var particle;
for(var i = 0; i < 500; i++){
particle = particles[i];
particle.x += particle.vx;
particle.y += particle.vy;
if(particle.x<=0 || particle.x>=window.innerWidth){
particle.vx *= -1;
}
if(particle.y<=0 || particle.y>=window.innerHeight){
particle.vy *= -1;
}
context.fillStyle = particle.color; //设置雪花的颜色
context.beginPath();
context.arc(particle.x,particle.y,particle.size,0,Math.PI*2,true);
context.closePath();
context.fill();// 填充颜色
}
}
setInterval(timeUpdata, 40);//每40ms执行一次timeUpdate函数
</script>
</body>
</html>
canvas粒子动画效果
最新推荐文章于 2024-08-19 16:56:14 发布