雪花效果

来源：互联网发布：人工智能语音聊天软件编辑：程序博客网时间：2024/04/29 00:21

一、HTML

二、CSS

body {
   background:#45aad7;
   margin:0;
   padding:0;
}
html, body{
   height:100%;
   width:100%;
}
#myCanvas{
   height:100%;
   width:100%;
   display: block;
}

三、JavaScript

//获取Canvas元素

var canvas=document.getElementById("myCanvas");

//返回一个对象，该对象提供了用于在画布上绘图的方法和属性

var context=canvas.getContext("2d");
//为粒子创建一个数组

var particles = [];
//循环500次，生成500粒雪花
for( var i = 0; i < 500; i++ ) {
particles.push( {

//设置雪花的初始x、y位置

x: Math.random()*window.innerWidth,
y: Math.random()*window.innerHeight,

      //设置雪花的x、y方向上的速度
      vx: (Math.random()*1-.5),
      vy: (Math.random()*1+.5),

//设置雪花的大小
size: 1+Math.random()*2,

//设置雪花的颜色
color: "#FFF"

//可以随机颜色：

//color:'#'+(Math.random()*0x1000000<<0).toString(16)

//说明：

//1、颜色范围十六进制：

// 0x000000~0xffffff（黑色~白色），0xffffff+1=0x1000000，取到0xffffff

// 颜色范围十进制：

// 0~16777215（黑色~白色）

//2、0x1000000<<0，转为十进制整数

//3、Math.random()*0x1000000<<0，返回0~16777215

//4、(Math.random()*0x1000000<<0).toString(16)，转十六进制

   } );
}
function timeUpdate(e){
   //清除画布区域
   context.clearRect(0, 0, window.innerWidth, window.innerHeight);

   var particle;
   //循环遍历所有雪花
   for( var i = 0; i < 500; i++ ) {
      //获取一个雪花对象

      particle = particles[i];
      //更新雪花的新x、y位置
      particle.x += particle.vx;

      particle.y += particle.vy;
      //当雪花移动到窗口左侧以外时，使其显示在窗口最右侧
      if(particle.x<0){
         particle.x = window.innerWidth;

       }
      //当雪花移动到窗口右侧以外时，使其显示在窗口最左侧
      if(particle.x>window.innerWidth){
         particle.x = 0;

       }
      //当雪花移动到窗口顶部以外时，使其重新显示在窗口最顶部
      if(particle.y>=window.innerHeight){
         particle.y = 0;

       }
      //设置雪花颜色
      context.fillStyle = particle.color;

//开始绘制雪花
context.beginPath();

//绘制圆点context.arc(x坐标,y坐标,半径,起始角,结束角)
context.arc(particle.x,particle.y,particle.size,0,Math.PI*2);

//闭合路径
context.closePath();

//填充颜色
context.fill();

}
}
//每过40毫秒绘制一次

setInterval( timeUpdate, 40 );

0 0