12-23 5,980 views
圣诞将至,在网站的首页加入雪花飘落效果是不错的,下面发一个canvas实现的雪花飘落代码:
演示地址:http://wx.karlew.com/canvas/snow/
html:
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>HTML5雪花飘落</title>
- <style>
- body, html {
- padding: 0;
- margin: 0;
- }
- .container{
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- background: url(img/bg.jpg);
- background-size: cover;
- }
- .canvas {
- display: block;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- position: fixed;
- pointer-events: none;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <canvas class="canvas" speed="0.3" size="1" count="50" wind-power="0.1"></canvas>
- <canvas class="canvas" speed="0.4" size="2" count="30" wind-power="0.4"></canvas>
- </div>
- <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
- <script src="js/snow.js"></script>
- </body>
- </html>
js:
- (function ($) {
- Snow = function (e, settings) {
- this.settings = settings,
- this.items = [],
- this.itemCount = settings.count,
- this.init(e)
- };
- //雪花对象重绘
- Snow.prototype.init = function (e) {
- this.canvas = e.get(0)
- this.ctx = this.canvas.getContext("2d")
- this.canvas.width = window.innerWidth
- this.canvas.height = window.innerHeight
- this.items = [];
- for (var i = 0; i < this.itemCount; i++) {
- var x = Math.floor(Math.random() * this.canvas.width),
- y = Math.floor(Math.random() * this.canvas.height),
- size = Math.floor(100 * Math.random()) % this.settings.size + 2,
- speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * size / 10 + .5,
- windPower = this.settings.windPower
- this.items.push({
- speed: speed,
- velY: speed,
- velX: windPower,
- x: x,
- y: y,
- size: size,
- stepSize: Math.random() / 30,
- step: 0
- })
- }
- this.snow();
- }
- //雪花运动相关
- Snow.prototype.snow = function () {
- var thiz = this,
- render = function () {
- thiz.ctx.clearRect(0, 0, thiz.canvas.width, thiz.canvas.height);
- for (var i = 0; i < thiz.itemCount; i++) {
- var item = thiz.items[i];
- item.y += item.velY,
- item.x += item.velX,
- (item.y >= thiz.canvas.height || item.y <= 0) && thiz.resetItem(item),
- (item.x >= thiz.canvas.width || item.x <= 0) && thiz.resetItem(item)
- var grd = thiz.ctx.createRadialGradient(item.x, item.y, 0, item.x, item.y, item.size - 1);
- grd.addColorStop(0, thiz.settings.startColor),
- grd.addColorStop(1, thiz.settings.endColor),
- thiz.ctx.fillStyle = grd, thiz.ctx.beginPath(),
- thiz.ctx.arc(item.x, item.y, item.size, 0, 2 * Math.PI),
- thiz.ctx.fill()
- }
- window.cancelAnimationFrame(render)
- window.requestAnimationFrame(render)
- };
- render()
- }
- //重置单个雪花
- Snow.prototype.resetItem = function (item) {
- item.x = Math.floor(Math.random() * this.canvas.width),
- item.y = 0,
- item.size = Math.floor(100 * Math.random()) % this.settings.size + 2,
- item.speed = Math.floor(100 * Math.random()) % this.settings.speed + Math.random() * item.size / 10 + .5,
- item.velY = item.speed,
- item.velX = item.velX
- };
- //初始化雪花对象
- $.fn.snow = function () {
- $(this).each(function (i, e) {
- var scope = {};
- $.each(e.attributes, function (index, key) {
- scope[ $.camelCase(key.name) ] = Number(Number(key.value)) ? Number(key.value) : key.value
- });
- new Snow($(e), {
- speed: scope.speed || 0.1,
- size: scope.size || 2,
- count: scope.count || 20,
- startColor: "rgba(255,255,255,1)",
- endColor: "rgba(255,255,255,0.3)",
- windPower: scope.windPower || 0
- });
- });
- };
- $(".canvas").snow();
- })(jQuery);