酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

JavaScript canvas实现雪花随机动态飘落效果

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-02-08
本篇文章主要介绍了JavaScript canvas实现雪花随机动态飘落效果,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

效果图如下:



代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    margin: 0;
    padding: 0;
  }
  canvas{
    background: #000;
  }
</style>
<body>
  <canvas id = "snow">
 
  </canvas>
  <script>
    var canvas = document.getElementById('snow');
    var context = canvas.getContext('2d');
    // 获得可视区的宽高
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    function snow(){
      context.save();
      // 开启路径
      context.beginPath();
      // 移动画布,确定雪花终点为中心点
      context.translate(100,100);
      //起点
      context.moveTo(-20,0);
      // 终点
      context.lineTo(20,0);
      // 线变成白色
      context.strokeStyle = '#fff';
      // 线变粗
      context.lineWidth = 10;
      // 线变圆头
      context.lineCap = 'round';
      context.stroke();
      // 角度转弧度
      var disX = Math.sin(30*Math.PI/180)*20;
      var disY = Math.sin(60*Math.PI/180)*20;
      // 画第二条线,左下到右上的线
      context.moveTo(-disX,disY);
      context.lineTo(disX,-disY);
      // 画第三条线
      context.moveTo(-disX,-disY);
      context.lineTo(disX,disY);
      context.stroke();
      context.restore();
    }
    // snow();
    //生成雪花的构造函数
    function Snow(x,y,scale,rotate,speedX,speedY,speedR){
           this.x = x;
           this.y = y;
           this.scale = scale;
           this.rotate = rotate;
           this.speedX = speedX;
           this.speedY = speedY;
           this.speedR = speedR;
          // 渲染雪花
          this.render = function(){
            context.save();
            context.beginPath();
            context.translate(this.x,this.y);
            context.scale(this.scale,this.scale);
            context.rotate(this.rotate*Math.PI/180);
            context.moveTo(-20,0);
            context.lineTo(20,0);
            context.strokeStyle = '#fff';
            context.lineWidth = 10;
            context.lineCap = 'round';
            context.stroke();
            var disX = Math.sin(30*Math.PI/180)*20;
            var disY = Math.sin(60*Math.PI/180)*20;
            context.moveTo(-disX,disY);
            context.lineTo(disX,-disY);
            context.moveTo(-disX,-disY);
            context.lineTo(disX,disY);
            context.stroke();
            context.restore();
 
          }
 
    }
    // var snow = new Snow(50,50,1,10,10,10,10);
    // snow.render();
    // 存储所有生成的雪花
    var snowArray = [];
    // 生成雪花
      function init(){
        var len = 100;
        for(var i = 0;i<len;i++){
          var x = Math.random()*canvas.width;
          var scale = Math.random()+0.5;
          var rotate = Math.random()*60;
          var speedX = Math.random()+1
          var speedY = Math.random()+5;
          var speedR = Math.random()*4+2;
          // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);
          // snow.render();
          (function(x,y,scale,rotate,speedX,speedY,speedR){
            setTimeout(function(){
            var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);
            snow.render();
            snowArray.push(snow);
          },Math.random()*8000);   
          })(x,0,scale,rotate,speedX,speedY,speedR);
      }snowing();
    }init();
      // 动起来
      function snowing(){
        setInterval(function(){
          //先清除
          context.clearRect(0,0,canvas.width,canvas.height);
          for(var i = 0;i < snowArray.length;i++){
            snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width;
            snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height;
            snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60;
            snowArray[i].render();
          }
        },30);
      }
     
    /**
     * sin60 = 对边/斜边 =>  对边 = sin60*斜边  =>  y=sin60*半径(r);
     */
  </script>
</body>
</html>

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/article/179858.htm

相关文章

  • AjaxFileUpload.js实现异步上传文件功能代码

    AjaxFileUpload.js实现异步上传文件功能代码

    做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去 等真正实现的时候才发现,根本行不通。 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。 AjaxFileUpload 这个插件的原理是......
    02-20
  • Javascript原生ajax请求代码

    Javascript原生ajax请求代码

    代码如下: class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || POST; this.data = data || ; this.callback_suc = cal......
    02-20
  • 基于js判断浏览器版本

    基于js判断浏览器版本

    浏览器类型判断 不考虑对 IE9 以下浏览器的判断 function getBrowserType(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var browser=unknown; if (userAgent.indexOf(IE)!=-1) { browser=IE; }else if(userAg......
    02-20
  • js实现分页导航效果的代码

    js实现分页导航效果的代码

    前言 最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果,默认显示5页, 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代......
    02-19
  • Javascript实现html转pdf高清版(提高分辨率)

    Javascript实现html转pdf高清版(提高分辨率)

    网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰,今天为大家介绍如何提高js实现html转pdf的清晰度 引入js文件 https://cdn.bootcss.com/jquery/3.4.1/jquery.js https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js htt......
    02-19
  • 详解JavaScript中的惰性载入函数及优势

    详解JavaScript中的惰性载入函数及优势

    定义 惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了。第二......
    02-18
  • js表达式与运算符简单操作教程

    js表达式与运算符简单操作教程

    代码如下: /*** Created by Administrator on 2017/12/14.* 表达式与运算符*///1.基本表达式 加减乘除var a = 4;a = 7/6;var b = (a + 4)/2;console.log(a);console.log(b);console.log(==========);//end//2.比较运算符 == != = =conso......
    02-15
  • JS实现简易计算器代码

    JS实现简易计算器代码

    用JS实现简易计算器,供大家参考,具体内容如下: 首先创建结构和样式 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title style body{ margin:0......
    02-14
  • JavaScript实现拖拽的代码

    JavaScript实现拖拽的代码

    盒子拖拽运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2、计算出鼠标相对盒子的距离 3、当鼠标移动的时候,获取鼠......
    02-12
  • JavaScript canvas仿流瀑布效果

    JavaScript canvas仿流瀑布效果

    效果图如下: 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: canvas id=canvas /canvas css部分: style *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }/style script var ......
    02-10

最新更新