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 学习之旅 (1)
Feb 05 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
个人小程序接入支付解决方案
May 23 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 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
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
深入理解PHP中的global
2014/08/19 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python基于twisted实现简单的web服务器
2014/09/29 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
对python 调用类属性的方法详解
2019/07/02 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python实现取余操作的简单实例
2020/08/16 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
客运企业隐患排查工作方案
2014/06/06 职场文书
银行进社区活动总结
2014/07/07 职场文书
2015年中秋寄语
2015/07/31 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python