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 instanceof 与typeof使用说明
Jan 11 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
js简单倒计时实现代码
Apr 30 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
再说下636单管机
2021/03/02 无线电
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
使用Python处理BAM的方法
2018/09/28 Python
python实现flappy bird游戏
2018/12/24 Python
python实现简单成绩录入系统
2019/09/19 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
档案接收函
2014/01/13 职场文书
三八妇女节活动总结
2014/05/04 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
会计工作检讨书
2015/02/19 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
创业计划书详解
2019/07/19 职场文书
使用pytorch实现线性回归
2021/04/11 Python