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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
js判断密码强度的方法
Mar 18 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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
模拟flock实现文件锁定
2007/02/14 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
犀利的js 函数集合
2009/06/11 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python实现实时视频流播放代码实例
2020/01/11 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
大学毕业生求职自荐信
2014/02/20 职场文书
小学生期末评语大全
2014/04/21 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
公司门卫工作职责
2014/06/28 职场文书
实习证明模板
2015/06/16 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电