JS实现的雪花飘落特效示例


Posted in Javascript onDecember 03, 2019

本文实例讲述了JS实现的雪花飘落特效。分享给大家供大家参考,具体如下:

首先我们要创建一个HTML文件,将其命名为index.html

<!DOCTYPE html>
<html>
<head>
 <title> Canvas - 雪花特效 </title>
 <meta charset="utf-8">
 <style>
 *{
  margin:0px;
  padding:0px;
 }
 .myCanvas{
  float:left;
  background:rgba(0,0,0,0);
 }
 </style>
</head>
<body>
 <canvas id="myCanvas" class="myCanvas"> </canvas>
</body>
</html>

在上面的代码中,我们创建了一个canvas画布,并且设置他为浮动,背景色无(如果这里不设置浮动,那么等下获取整个屏幕的大小赋给他的时候是会产生边距的)

接下来的JavaScript代码

<script>
 //获取屏幕最大长宽
  var maxWidth = document.documentElement.clientWidth;
  var maxHeight = document.documentElement.clientHeight;
  //获取canvas画布
  var canvasObj = document.getElementById('myCanvas');
  //将屏幕的长宽赋给画布
  canvasObj.width = maxWidth;
  canvasObj.height = maxHeight;
  //创建雪花图形(白色的圆形)
  var cxt = canvasObj.getContext('2d');
  //设置雪花的个数
  var snowCount = 1000;
  var objArray = [];
  for(var index = 0;index < snowCount; index++){
   objArray.push({
     //随机x轴位置
     x : Math.random()*maxWidth,
     //随机y轴位置
     y : Math.random()*maxHeight,
     //随机半径大小
     r : Math.random()*4+1,
     //画圆
     drow : function() {
     cxt.beginPath();
       //填充色
       cxt.fillstyle = "#fff";
       //填充
       cxt.fill();
       //圆的属性
       cxt.arc(this.x,this.y,this.r,0,2*Math.PI);
       //输出圆
       cxt.stroke();
     }
  });
 }
  function drawSnow() {
   cxt.clearRect(0,0,maxWidth,maxHeight)
    //清除0x轴,0y轴,最大屏幕x轴,最大屏幕y轴的圆形
    for(var index = 0; index<objArray.length; index++) {
     //把每个圆都画出来
      objArray[index].drow();
    }
    downLoadSnow()
    //调用雪花移动效果
  }
  function downLoadSnow() {
   for(var index = 0;index<objArray.length;index++){
     if(objArray[index].x > maxWidth) {
       objArray[index].x = 0;
        //当移动的位置大于最大屏幕宽度时返回到0
       } else {
        objArray[index].x +=5;
         //否则一直加下去
       }
       if(objArray[index].y > maxHeight) {
         objArray[index].y = 0;
         //当移动的位置大于最大屏幕高度时返回0
       } else {
         objArray[index].y +=5;
         //否则一直加下去
       }
     }
  }
 setInterval("drawSnow()",30);
 //调用计时器
</script>

到此雪花落下的结果就已经实现了

这里使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码,可得如下运行效果:

JS实现的雪花飘落特效示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
JavaScript中return用法示例
Nov 29 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
vue中实现高德定位功能
Dec 03 #Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 #Javascript
js实现时分秒倒计时
Dec 03 #Javascript
Vue实现验证码功能
Dec 03 #Javascript
JS实现压缩上传图片base64长度功能
Dec 03 #Javascript
js实现AI五子棋人机大战
May 28 #Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
js获取视频时长代码
2014/04/10 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python在非root权限下的安装方法
2018/01/23 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
年会活动策划方案
2014/01/23 职场文书
购房意向书
2014/08/30 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2016继续教育研修日志
2015/11/13 职场文书
创业计划书之寿司
2019/07/19 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
vue使用echarts实现折线图
2022/03/21 Vue.js
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android