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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
js实现右键自定义菜单
Dec 03 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python中os.path用法分析
2015/01/15 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
电话销售经理岗位职责
2013/12/07 职场文书
项目资料员岗位职责
2013/12/10 职场文书
统计工作个人总结
2015/03/03 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
CentOS安装Nginx并部署vue
2022/04/12 Servers
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android