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

本文实例讲述了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.jb51.net/code/WebCodeRun测试上述代码，可得如下运行效果：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 基于JavaScript实现飘落星星特效

    基于JavaScript实现飘落星星特效

    本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下 1.效果图 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: absolute; } body { background-image: u

  • 原生javascript+css3编写的3D魔方动画旋扭特效

    原生javascript+css3编写的3D魔方动画旋扭特效

    一直从事于后端编程工作,工作中也经常接触和使用一些前端技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用css3

  • Javascript实现多彩雪花从天降散落效果的方法

    Javascript实现多彩雪花从天降散落效果的方法

    本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法.分享给大家供大家参考.具体分析如下: 先来看看运行效果,如下图所示: 完整源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

  • JavaScript+html5 canvas实现图片破碎重组动画特效

    JavaScript+html5 canvas实现图片破碎重组动画特效

    也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

  • 下雪了 javascript实现雪花飞舞

    本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下 原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 效果预览:http://wjf444128852.github.io/demo02/snow/index.html HTML代码: <!DOCTYPE html> <html lang="en&qu

  • 原生JS实现的雪花飘落动画效果

    原生JS实现的雪花飘落动画效果

    本文实例讲述了原生JS实现的雪花飘落动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>www.jb51.net JS下雪动画</title> &

  • 使用js实现雪花飘落效果

    使用js实现雪花飘落效果

    今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head>  <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • JS和JQuery实现雪花飘落效果

    JS和JQuery实现雪花飘落效果

    很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式. 我们先来看一下需要实现的雪花效果: 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 解释 setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setT

  • 使用javascript实现雪花飘落的效果

    看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome. 2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快. 3.向文档中添加元素直接改成通过JS代码创建元素对象的方式. 实现思路: 1.初始化生成10个div,全都采用绝对定位

  • JS实现模拟风力的雪花飘落效果

    本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

随机推荐