karlew > HTML5特效 > canvas雪花飘落效果

canvas雪花飘落效果

12-23 5,554 views

圣诞将至，在网站的首页加入雪花飘落效果是不错的，下面发一个canvas实现的雪花飘落代码：

演示地址：http://wx.karlew.com/canvas/snow/

html：

  1. <html>  
  2. <head>  
  3.     <meta charset="UTF-8">  
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>HTML5雪花飘落</title>  
  7.     <style>  
  8.         body, html {   
  9.             padding: 0;   
  10.             margin: 0;  
  11.         }  
  12.         .container{  
  13.             width: 100vw;  
  14.             height: 100vh;  
  15.             overflow: hidden;  
  16.             background: url(img/bg.jpg);  
  17.             background-size: cover;  
  18.         }  
  19.         .canvas {  
  20.             display: block;  
  21.             width: 100%;  
  22.             height: 100%;  
  23.             top: 0;  
  24.             left: 0;  
  25.             position: fixed;  
  26.             pointer-events: none;  
  27.         }  
  28.     </style>  
  29. </head>  
  30. <body>  
  31.     <div class="container">  
  32.         <canvas class="canvas" speed="0.3" size="1" count="50" wind-power="0.1"></canvas>  
  33.         <canvas class="canvas" speed="0.4" size="2" count="30" wind-power="0.4"></canvas>  
  34.     </div>  
  35.       
  36.     <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>  
  37.     <script src="js/snow.js"></script>  
  38. </body>  
  39. </html>  

js：

  1. (function ($) {  
  2.       
  3.     Snow = function (e, settings) {  
  4.         this.settings = settings,  
  5.         this.items = [],  
  6.         this.itemCount = settings.count,  
  7.         this.init(e)  
  8.     };  
  9.     //雪花对象重绘  
  10.     Snow.prototype.init = function (e) {  
  11.         this.canvas = e.get(0)  
  12.         this.ctx = this.canvas.getContext("2d")  
  13.         this.canvas.width = window.innerWidth  
  14.         this.canvas.height = window.innerHeight  
  15.         this.items = [];  
  16.         for (var i = 0; i < this.itemCount; i++) {  
  17.             var x = Math.floor(Math.random() * this.canvas.width),  
  18.             y = Math.floor(Math.random() * this.canvas.height),  
  19.             size = Math.floor(100 * Math.random()) % this.settings.size + 2,  
  20.             speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * size / 10 + .5,  
  21.             windPower = this.settings.windPower  
  22.             this.items.push({  
  23.                 speed: speed,  
  24.                 velY: speed,  
  25.                 velX: windPower,  
  26.                 x: x,  
  27.                 y: y,  
  28.                 size: size,  
  29.                 stepSize: Math.random() / 30,  
  30.                 step: 0  
  31.             })  
  32.         }  
  33.   
  34.         this.snow();  
  35.     }  
  36.     //雪花运动相关  
  37.     Snow.prototype.snow = function () {  
  38.         var thiz = this,  
  39.         render = function () {  
  40.             thiz.ctx.clearRect(0, 0, thiz.canvas.width, thiz.canvas.height);  
  41.             for (var i = 0; i < thiz.itemCount; i++) {  
  42.                 var item = thiz.items[i];  
  43.                 item.y += item.velY,   
  44.                 item.x += item.velX,   
  45.                 (item.y >= thiz.canvas.height || item.y <= 0) && thiz.resetItem(item),   
  46.                 (item.x >= thiz.canvas.width || item.x <= 0) && thiz.resetItem(item)  
  47.                 var grd = thiz.ctx.createRadialGradient(item.x, item.y, 0, item.x, item.y, item.size - 1);  
  48.                 grd.addColorStop(0, thiz.settings.startColor),   
  49.                 grd.addColorStop(1, thiz.settings.endColor),   
  50.                 thiz.ctx.fillStyle = grd, thiz.ctx.beginPath(),   
  51.                 thiz.ctx.arc(item.x, item.y, item.size, 0, 2 * Math.PI),   
  52.                 thiz.ctx.fill()  
  53.             }  
  54.             window.cancelAnimationFrame(render)  
  55.             window.requestAnimationFrame(render)  
  56.         };  
  57.         render()  
  58.     }  
  59.     //重置单个雪花  
  60.     Snow.prototype.resetItem = function (item) {  
  61.         item.x = Math.floor(Math.random() * this.canvas.width),   
  62.         item.y = 0,  
  63.         item.size = Math.floor(100 * Math.random()) % this.settings.size + 2,   
  64.         item.speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * item.size / 10 + .5,   
  65.         item.velY = item.speed,   
  66.         item.velX = item.velX  
  67.     };  
  68.   
  69.     //初始化雪花对象  
  70.     $.fn.snow = function () {  
  71.         $(this).each(function (i, e) {  
  72.             var scope = {};  
  73.             $.each(e.attributes, function (index, key) {  
  74.                 scope[ $.camelCase(key.name) ] = Number(Number(key.value)) ? Number(key.value) : key.value  
  75.             });  
  76.   
  77.             new Snow($(e), {  
  78.                 speed: scope.speed || 0.1,  
  79.                 size: scope.size || 2,  
  80.                 count: scope.count || 20,  
  81.                 startColor: "rgba(255,255,255,1)",  
  82.                 endColor: "rgba(255,255,255,0.3)",  
  83.                 windPower: scope.windPower || 0  
  84.             });  
  85.         });  
  86.     };  
  87.       
  88.     $(".canvas").snow();  
  89. })(jQuery);  

源码地址：https://github.com/karlew/canvas/tree/master/snow

版权属于: karlew

原文地址: https://www.karlew.com/archives/448

转载时必须以链接形式注明原始出处及本声明。

欢迎留言