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 18 Javascript
offsetParent 算法分析
Apr 05 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JS原生实现轮播图的几种方法
Mar 23 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抓取https的内容的代码
2010/04/06 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python 读取DICOM头文件的实例
2018/05/07 Python
简单了解python数组的基本操作
2019/11/26 Python
python中return如何写
2020/06/18 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
初二政治教学反思
2014/01/12 职场文书
12岁生日感言
2014/01/21 职场文书
领导接待方案
2014/03/13 职场文书
社区居务公开实施方案
2014/03/27 职场文书
职工小家建设活动方案
2014/08/25 职场文书
银行服务理念口号
2015/12/25 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技