5.html5 作业 canvas 雪花飘落

image.png

image.png

javascript三角函数的使用

我只读了一点三角函数的基本用法.
版本1.0 这是有明显缺陷的.

        // 绘制雪花
        // 清空画布, 来更新
        // 如何移动位置?
        // 如何进行旋转?
        
        // 雪花的基本参数, 中心坐标, 长度, 角度
        // 画布
        var myCanvas = document.getElementById("myCanvas");
        var ctx = myCanvas.getContext("2d");
        
        // 一个雪花的创建.
        var createsnow = (function () {
        return  function (x,y,deg,r) {
          
          ctx.moveTo(x,y);
          // 六个边 怎么画比较好?
          // 需要一点数学知识.
          // 需要根据 角度和长度把 坐标求出来.
          
          // 读数和弧度单位换算.
          // 360 = 2 * Math.PI
          // x / 360 = y / 2 / Math.Pi
          // 已知 x 求 y
          // y = x/180 * Math.Pi
          // 我这说的也挺费劲的...
          
          var ddd = deg/180 * Math.PI;
          var x1 = x + Math.cos(ddd) * r;
          var y1 = y + Math.sin(ddd) * r;
          var x2 = x - Math.cos(ddd) * r;
          var y2 = y - Math.sin(ddd) * r;
          var x3 = x + Math.cos(ddd + (Math.PI/3)) * r;
          var y3 = y + Math.sin(ddd + (Math.PI/3)) * r;
          var x4 = x - Math.cos(ddd + (Math.PI/3)) * r;
          var y4 = y - Math.sin(ddd + (Math.PI/3)) * r;
          var x5 = x + Math.cos(ddd - (Math.PI/3)) * r;
          var y5 = y + Math.sin(ddd - (Math.PI/3)) * r;
          var x6 = x - Math.cos(ddd - (Math.PI/3)) * r;
          var y6 = y - Math.sin(ddd - (Math.PI/3)) * r;
          
          // 根据 坐标 画出线条.
          ctx.beginPath();
          ctx.moveTo(x,y);
          ctx.lineTo(x1,y1);
          ctx.lineTo(x2,y2);
          ctx.closePath();
          ctx.lineTo(x3,y3);
          ctx.lineTo(x4,y4);
          ctx.closePath();
          ctx.lineTo(x5,y5);
          ctx.lineTo(x6,y6);
          ctx.closePath();
          ctx.lineWidth = 5;
          ctx.strokeStyle = "white";
          ctx.stroke();
          
        }
        })();
        
        // 让一个雪花完整的动画
//      createsnow(100,100,30,30);
        
        function move () {
          var x =Math.random() * 500;
          var y = 0;
          var r = Math.random() * 15 + 5;
          var deg = parseInt(Math.random() * 360);
          var speedx = Math.random() > 0.5 ? Math.random() * 5 + 2 : - Math.random() * 5 + 2; 
          var speedy = Math.random() * 5 + 2;
            var timer = setInterval(function () {
              x += speedx;
              y += speedy;
              deg++;
                ctx.clearRect(0,0,500,500);
                createsnow(x,y,deg,r);
                if (x < -r || x > 500+r || y > 500 + r) {
                    clearInterval(timer);
                }
            },50);
        }
        move();
        // 让多个雪花完整的动画.
        setInterval(function () {
            move();// 因为每个 move 执行时 都会 clearRect, 所以画面不堪入目
        },100)

版本2.0

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewprot" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>dddd</title>
    <link rel="stylesheet" type="text/css" href="css/test.css" />
    <style type="text/css">
      canvas{
        margin: 100px 200px;
        border: 1px solid black;
        background-color: #000;
      }
    </style>
  </head>
  
  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    
    <button onclick="stop()">stop</button>
    <button onclick="move()">start</button>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      
      
      // 一条路径 
        // 落笔
        
        // 绘制雪花
        // 清空画布, 来更新
        // 如何移动位置?
        // 如何进行旋转?
        
        // 雪花的基本参数, 中心坐标, 长度, 角度
        // 画布
        var myCanvas = document.getElementById("myCanvas");
        var ctx = myCanvas.getContext("2d");
        
        // 一个雪花的创建.
        var createsnow = (function () {
        return  function (x,y,deg,r) {
          
          ctx.moveTo(x,y);
          // 六个边 怎么画比较好?
          // 需要一点数学知识.
          // 需要根据 角度和长度把 坐标求出来.
          
          // 读数和弧度单位换算.
          // 360 = 2 * Math.PI
          // x / 360 = y / 2 / Math.Pi
          // 已知 x 求 y
          // y = x/180 * Math.Pi
          // 我这说的也挺费劲的...
          
          var ddd = deg/180 * Math.PI;
          var x1 = x + Math.cos(ddd) * r;
          var y1 = y + Math.sin(ddd) * r;
          var x2 = x - Math.cos(ddd) * r;
          var y2 = y - Math.sin(ddd) * r;
          var x3 = x + Math.cos(ddd + (Math.PI/3)) * r;
          var y3 = y + Math.sin(ddd + (Math.PI/3)) * r;
          var x4 = x - Math.cos(ddd + (Math.PI/3)) * r;
          var y4 = y - Math.sin(ddd + (Math.PI/3)) * r;
          var x5 = x + Math.cos(ddd - (Math.PI/3)) * r;
          var y5 = y + Math.sin(ddd - (Math.PI/3)) * r;
          var x6 = x - Math.cos(ddd - (Math.PI/3)) * r;
          var y6 = y - Math.sin(ddd - (Math.PI/3)) * r;
          
          // 根据 坐标 画出线条.
          ctx.beginPath();
          ctx.moveTo(x,y);
          ctx.lineTo(x1,y1);
          ctx.lineTo(x2,y2);
          ctx.closePath();
          ctx.lineTo(x3,y3);
          ctx.lineTo(x4,y4);
          ctx.closePath();
          ctx.lineTo(x5,y5);
          ctx.lineTo(x6,y6);
          ctx.closePath();
          ctx.lineWidth = 5;
          ctx.strokeStyle = "white";
          ctx.stroke();
          
        }
        })();
        
        // 让一个雪花完整的动画
//      createsnow(100,100,30,30);
        
        function SnowData () {
          this.init = function () {
            this.x =Math.random() * 500;
            this.y = 0;
            this.r = Math.random() * 15 + 5;
            this.deg = parseInt(Math.random() * 360);
            this.speedx = Math.random() > 0.5 ? Math.random() * 5 + 2 : - Math.random() * 5 + 2; 
            this.speedy = Math.random() * 5 + 2;
          }
          this.render = function () {
            this.x += this.speedx;
            this.y += this.speedy;
            this.deg++;
            createsnow(this.x,this.y,this.deg,this.r);
            if (this.x < -this.r || this.x > 500+this.r || this.y > 500 + this.r) {
              this.init();
            }
          }
          this.init();
          createsnow(this.x,this.y,this.deg,this.r);
        }
        
        
        function move () {
          // 创建多个雪花
          // 使用for循环.
          
          // 清空之后,
          // 必须让他们各自按照自己的数据进行更新.
          // 所以最好是用面向对象的方式?
          
          // 创建50个雪花
          if (!move.flag) {// 这个flag 是用来防止多次开启计时器
            
          var snowArr = [];
          
          for(var i = 0; i < 50; i++) {
            snowArr.push(new SnowData());
          }
          
          
            move.timer = setInterval(function () {
                ctx.clearRect(0,0,500,500);
                snowArr.forEach(function (item) {
                    item.render();
                });
                        
            },50);
            move.flag = true;
            }

        }
        move();
        
        function stop () {
            clearInterval(move.timer);
                ctx.clearRect(0,0,500,500);
                move.flag = false;
        }
    </script>
  </body>

</html>

但我想让一开始的时候,不要一下子全都出来,
结束的时候,也不要一下子全部消失.
有点晚了,
我的思路是,
创建雪花时,不要一次创建50个,
而是一次创建5个
每次计时器判断 数组的长度小于50个
就又创建5个

我们在构造函数中,定义另一个render
点击结束按钮时, 启动该render,该render在雪花飘出边界时,
不会从新运行 init() 回到顶边.
而是,修改该对象的一个变量, 比如end? 为 true;
在snowarr 在结束按钮中的循环中,如果发现该 值为true,
则从数组中排除,
当数组长度为0 时, 完全停止计时器.

如果我们重新启动,
则我们在循环时, 给每个end 重新赋值 false;

大概这么个思路.

明天再说.


妈呀, 我这表达能力还真的有待提高,
这写的什么啊,
完全看不懂..
先放到github上

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,649评论 18 139
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,172评论 0 3
  • 时间就像影子,很少有人低下头仔细观望。生气是拿别人的错误来惩罚自己。人生在世,要的只有快乐!一切看淡了,心也就不累...
    洋氵羊阅读 121评论 0 0
  • 深刻而隽永的《朱子家训》 朱杰人 【我的一...
    谨信阅读 691评论 5 1