HTML5Canvas雪花散开放大动画特效.zip资源-CSDN文库

共2个文件

js：1个

html：1个

版权申诉

jquery

jquery插件

jquery特效

163 浏览量 2023-09-26 01:45:17 上传评论收藏 35KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 Canvas雪花散开放大动画特效.zip （2个子文件）

jquery.min.js 91KB

index.html 7KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas雪花散开放大动画特效</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .container{ width: 100%; height: 100%; margin: 0; padding: 0; }</style> </head> <body> <div id="jsi-snow-container" class="container"></div> <script> var RENDERER = { SNOW_COUNT: {INIT : 100, DELTA : 1}, BACKGROUND_COLOR : 'hsl(%h, 50%, %l%)', INIT_HUE : 180, DELTA_HUE : 0.1, init : function(){ this.setParameters(); this.reconstructMethod(); this.createSnow(this.SNOW_COUNT.INIT * this.countRate, true); this.render(); }, setParameters : function(){ this.$window = $(window); this.$container = $('#jsi-snow-container'); this.width = this.$container.width(); this.height = this.$container.height(); this.center = {x : this.width / 2, y : this.height / 2}; this.countRate = this.width * this.height / 500 / 500; this.canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0); this.context = this.canvas.getContext('2d'); this.radius = Math.sqrt(this.center.x * this.center.x + this.center.y * this.center.y); this.hue = this.INIT_HUE; this.snows = []; }, reconstructMethod : function(){ this.render = this.render.bind(this); }, createSnow : function(count, toRandomize){ for(var i = 0; i < count; i++){ this.snows.push(new SNOW(this.width, this.height, this.center, toRandomize)); } }, render : function(){ requestAnimationFrame(this.render); var gradient = this.context.createRadialGradient(this.center.x, this.center.y, 0, this.center.x, this.center.y, this.radius), backgroundColor = this.BACKGROUND_COLOR.replace('%h', this.hue); gradient.addColorStop(0, backgroundColor.replace('%l', 30)); gradient.addColorStop(0.2, backgroundColor.replace('%l', 20)); gradient.addColorStop(1, backgroundColor.replace('%l', 5)); this.context.fillStyle = gradient; this.context.fillRect(0, 0, this.width, this.height); for(var i = this.snows.length - 1; i >= 0; i--){ if(!this.snows[i].render(this.context)){ this.snows.splice(i, 1); } } this.hue += this.DELTA_HUE; this.hue %= 360; this.createSnow(this.SNOW_COUNT.DELTA, false); } }; var SNOW = function(width, height, center, toRandomize){ this.width = width; this.height = height; this.center = center; this.init(toRandomize); }; SNOW.prototype = { RADIUS : 20, OFFSET : 4, INIT_POSITION_MARGIN : 20, COLOR : 'rgba(255, 255, 255, 0.8)', TOP_RADIUS : {MIN : 1, MAX : 3}, SCALE : {INIT : 0.04, DELTA : 0.01}, DELTA_ROTATE : {MIN : -Math.PI / 180 / 2, MAX : Math.PI / 180 / 2}, THRESHOLD_TRANSPARENCY : 0.7, VELOCITY : {MIN : -1, MAX : 1}, LINE_WIDTH : 2, BLUR : 10, init : function(toRandomize){ this.setParameters(toRandomize); this.createSnow(); }, setParameters : function(toRandomize){ if(!this.canvas){ this.radius = this.RADIUS + this.TOP_RADIUS.MAX * 2 + this.LINE_WIDTH; this.length = this.radius * 2; this.canvas = $('<canvas />').attr({width : this.length, height : this.length}).get(0); this.context = this.canvas.getContext('2d'); } this.topRadius = this.getRandomValue(this.TOP_RADIUS); var theta = Math.PI * 2 * Math.random(); this.x = this.center.x + this.INIT_POSITION_MARGIN * Math.cos(theta); this.y = this.center.y + this.INIT_POSITION_MARGIN * Math.sin(theta); this.vx = this.getRandomValue(this.VELOCITY); this.vy = this.getRandomValue(this.VELOCITY); this.deltaRotate = this.getRandomValue(this.DELTA_ROTATE); this.scale = this.SCALE.INIT; this.deltaScale = 1 + this.SCALE.DELTA * 500 / Math.max(this.width, this.height); this.rotate = 0; if(toRandomize){ for(var i = 0, count = Math.random() * 1000; i < count; i++){ this.x += this.vx; this.y += this.vy; this.scale *= this.deltaScale; this.rotate += this.deltaRotate; } } }, getRandomValue : function(range){ return range.MIN + (range.MAX - range.MIN) * Math.random(); }, createSnow : function(){ this.context.clearRect(0, 0, this.length, this.length); this.context.save(); this.context.beginPath(); this.context.translate(this.radius, this.radius); this.context.strokeStyle = this.COLOR; this.context.lineWidth = this.LINE_WIDTH; this.context.shadowColor = this.COLOR; this.context.shadowBlur = this.BLUR; var angle60 = Math.PI / 180 * 60, sin60 = Math.sin(angle60), cos60 = Math.cos(angle60), threshold = Math.random() * this.RADIUS / this.OFFSET | 0, rate = 0.5 + Math.random() * 0.5, offsetY = this.OFFSET * Math.random() * 2, offsetCount = this.RADIUS / this.OFFSET; for(var i = 0; i < 6; i++){ this.context.save(); this.context.rotate(angle60 * i); for(var j = 0; j <= threshold; j++){ var y = -this.OFFSET * j; this.context.moveTo(0, y); this.context.lineTo(y * sin60, y * cos60); } for(var j = threshold; j < offsetCount; j++){ var y = -this.OFFSET * j, x = j * (offsetCount - j + 1) * rate; this.context.moveTo(x, y - offsetY); this.context.lineTo(0, y); this.context.lineTo(-x, y - offsetY); } this.context.moveTo(0, 0); this.context.lineTo(0, -this.RADIUS); this.context.arc(0, -this.RADIUS - this.topRadius, this.topRadius, Math.PI / 2, Math.PI * 2.5, false); this.context.restore(); } this.context.stroke(); this.context.restore(); }, render : function(context){ context.save(); if(this.scale > this.THRESHOLD_TRANSPARENCY){ context.globalAlpha = Math.max(0, (1 - this.scale) / (1 - this.THRESHOLD_TRANSPARENCY)); if(this.scale > 1 || this.x < -this.radius || this.x > this.width + this.radius || this.y < -this.radius || this.y > this.height + this.radius){ context.restore(); return false; } } context.translate(this.x, this.y); context.rotate(this.rotate); context.scale(this.scale, this.scale); context.drawImage(this.canvas, -this.radius, -this.radius); context.restore(); this.x += this.vx; this.y += this.vy; this.scale *= this.deltaScale; this.rotate += this.deltaRotate; return true; } }; $(function(){ RENDERER.init(); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉