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


Posted in Javascript onFebruary 08, 2020

用canvas实现雪花随机动态飘落,供大家参考,具体内容如下

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

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
jQuery功能函数详解
Feb 01 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
深入分析javascript中console命令
Aug 14 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
JS实现简易留言板增删功能
Feb 08 #Javascript
原生JS实现留言板功能
Feb 08 #Javascript
javascript实现留言板功能
Feb 08 #Javascript
JavaScript实现PC端横向轮播图
Feb 07 #Javascript
vue更改数组中的值实例代码详解
Feb 07 #Javascript
Vue 一键清空表单的实现方法
Feb 07 #Javascript
Vue中qs插件的使用详解
Feb 07 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python编写单元测试代码实例
2020/09/10 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
禁毒宣传工作方案
2014/05/23 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书