您的位置 首页 技术

canvas实现雪花随机动态飘落效果(代码示例)

本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法,文中示例代码介绍的非常详细。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 用canvas实…

本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法,文中示例代码介绍的非常详细。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

用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>

动态效果图:

1.gif

更多炫酷CSS3、HTML5、jQuery、Javascript特效,推荐访问:js特效网!

以上就是canvas实现雪花随机动态飘落效果(代码示例)的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/79962.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部