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 相关文章推荐
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JavaScript类的写法
2016/09/17 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python实现粒子群算法的示例
2021/02/14 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
党员廉洁自律承诺书
2014/05/26 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
个人年终总结怎么写
2015/03/09 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
Python集合set()使用的方法详解
2022/03/18 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技