html5 canvas游动的水母特效代码下载



19 72 25



特效描述:html5 canvas游动的水母,html5 canvas游动的水母特效代码下载

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

<div id="jsi-jellyfish-container" class="container"></div>
<script>
var RENDERER = {
	JELLYFISH_RATE: 0.00015,
	DUST_RATE: 0.0005,
	ADJUST_DISTANCE : 100,
	ADJUST_OFFSET : 5,
	init : function(){
		this.setParameters();
		this.reconstructMethod();
		this.createElements();
		this.bindEvent();
		this.render();
	},
	setParameters : function(){
		this.$window = $(window);
		this.$container = $('#jsi-jellyfish-container');
		this.width = this.$container.width();
		this.height = this.$container.height();
		this.radius = Math.sqrt(Math.pow(this.width / 2, 2) + Math.sqrt(this.height/ 2, 2));
		this.distance = Math.sqrt(Math.pow(this.width, 2) + Math.sqrt(this.height, 2));
		this.canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0);
		this.context = this.canvas.getContext('2d');
		this.jellyfishes = [];
		this.theta = 0;
		this.x =  0;
		this.y =  0;
		this.destinationX = this.x;
		this.destinationY = this.y;
		this.dusts = [];
	},
	reconstructMethod : function(){
		this.render = this.render.bind(this);
	},
	getRandomValue : function(range){
		return range.min + (range.max - range.min) * Math.random();
	},
	createElements : function(){
		for(var i = 0, length = this.JELLYFISH_RATE * this.width * this.height; i < length; i++){
			this.jellyfishes.push(new JELLYFISH(this));
		}
		for(var i = 0, length = this.DUST_RATE * this.width * this.height; i < length; i++){
			this.dusts.push(new DUST(this));
		}
	},
	bindEvent : function(){
		this.$container.on('mousemove', this.translateCenter.bind(this, false));
		this.$container.on('mouseout', this.translateCenter.bind(this, true));
	},
	translateCenter : function(toAdjust, event){
		var offset = this.$container.offset();
		this.destinationX = event.clientX - offset.left + this.$window.scrollLeft();
		this.destinationY = event.clientY - offset.top + this.$window.scrollTop();
		if(!toAdjust){
			return;
		}
		if(this.destinationX < this.ADJUST_OFFSET){
			this.destinationX = 0;
		}else if(this.radius > this.width - this.ADJUST_OFFSET){
			this.destinationX = this.width;
		}
		if(this.destinationY < this.ADJUST_OFFSET){
			this.destinationY = 0;
		}else if(this.radius > this.height - this.ADJUST_OFFSET){
			this.destinationY = this.height;
		}
	},
	render : function(){
		requestAnimationFrame(this.render);
		if(this.destinationX > this.x){
			this.x = Math.min(this.x + this.ADJUST_DISTANCE, this.destinationX);
		}else{
			this.x = Math.max(this.x - this.ADJUST_DISTANCE, this.destinationX);
		}
		if(this.destinationY > this.y){
			this.y = Math.min(this.y + this.ADJUST_DISTANCE, this.destinationY);
		}else{
			this.y = Math.max(this.y - this.ADJUST_DISTANCE, this.destinationY);
		}
		var gradient = this.context.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
		gradient.addColorStop(0, 'hsl(245, 100%, 50%)');
		gradient.addColorStop(0.3, 'hsl(245, 100%, 30%)');
		gradient.addColorStop(1, 'hsl(245, 100%, 10%)');
		this.context.fillStyle = gradient;
		this.context.fillRect(0, 0, this.width, this.height);
		for(var i = 0, length = this.dusts.length; i < length; i++){
			this.dusts[i].render(this.context, this.x, this.y);
		}
		for(var i = 0, length = this.jellyfishes.length; i < length; i++){
			this.jellyfishes[i].render(this.context, this.x, this.y);
		}
	}
};
var JELLYFISH = function(renderer){
	this.renderer = renderer;
	this.init(true);
};
JELLYFISH.prototype = {
	EXPANSION_RANGE : {min : Math.PI / 120, max : Math.PI / 30},
	DIRECTION_RANGE : {min : 0, max : Math.PI * 2},
	BASE_RANGE_X : {min : 10, max : 15},
	BASE_RANGE_Y : {min : 0, max : 5},
	BASE_RANGE_CP_X : {min : 20, max : 50},
	BASE_RANGE_CP_Y : {min : -40, max : -20},
	EXPANTION_OFFSET_RANGE : {min : 0.2, max : 0.5},
	EXTENSION_RATE_RANGE : {min : 0.5, max : 1.5},
	FEELER_LENGTH_RANGE : {min : 15, max : 30},
	FEELER_WIDTH_RANGE : {min : 2, max : 4},
	ACCELERATION_RATE : 0.2,
	OFFSET_TO_JUDGE : 100,
	FRICTION : 0.96,
	EXTENSION_COUNT : 100,
	init : function(toInit){
		this.radius = this.renderer.radius + this.OFFSET_TO_JUDGE * 2;
		if(toInit){
			this.x = this.renderer.getRandomValue({min : -this.OFFSET_TO_JUDGE, max : this.renderer.width + this.OFFSET_TO_JUDGE});
			this.y = this.renderer.getRandomValue({min : -this.OFFSET_TO_JUDGE, max : this.renderer.height + this.OFFSET_TO_JUDGE});
			this.direction = this.renderer.getRandomValue(this.DIRECTION_RANGE);
		}else{
			switch(condition = Math.random() * 4 | 0){
			case 0:
				this.x = -this.OFFSET_TO_JUDGE;
				this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height});
				this.direction = this.renderer.getRandomValue({min : Math.PI / 4, max : Math.PI * 3 / 4});
				break;
			case 1:
				this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width});
				this.y = -this.OFFSET_TO_JUDGE;
				this.direction = this.renderer.getRandomValue({min : Math.PI * 3 / 4, max : Math.PI * 5 / 4});
				break;
			case 2:
				this.x = this.renderer.width + this.OFFSET_TO_JUDGE;
				this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height});
				this.direction = this.renderer.getRandomValue({min : Math.PI * 5 / 4, max : Math.PI * 7 / 4});
				break;
			case 3:
				this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width});
				this.y = this.renderer.height + this.OFFSET_TO_JUDGE;
				this.direction = this.renderer.getRandomValue({min : Math.PI * 3 / 4, max : Math.PI * 5 / 4});
			}
		}
		this.expansion = 0;
		this.expansionDelta = this.renderer.getRandomValue(this.EXPANSION_RANGE);
		this.vx = 0;
		this.vy = 0;
		this.ax = Math.sin(this.direction) * this.expansionDelta * this.ACCELERATION_RATE;
		this.ay = -Math.cos(this.direction) * this.expansionDelta * this.ACCELERATION_RATE;
		this.baseX = this.renderer.getRandomValue(this.BASE_RANGE_X);
		this.baseY = this.renderer.getRandomValue(this.BASE_RANGE_Y);
		this.baseCPX = this.renderer.getRandomValue(this.BASE_RANGE_CP_X);
		this.baseCPY = this.renderer.getRandomValue(this.BASE_RANGE_CP_Y);
		this.expansionOffset = this.renderer.getRandomValue(this.EXPANTION_OFFSET_RANGE);
		this.feelerLength = this.renderer.getRandomValue(this.FEELER_LENGTH_RANGE);
		this.feelerWidth = this.renderer.getRandomValue(this.FEELER_WIDTH_RANGE);
		this.extensionRate = this.renderer.getRandomValue(this.EXTENSION_RATE_RANGE);
		this.theta = 0;
	},
	render : function(context, x, y){
		context.save();
		context.translate(this.x, this.y);
		context.rotate(this.direction);
		var opacity = 0.1 + 0.9 * Math.pow(1 - Math.min(1, Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2)) / this.renderer.distance), 2),
			feelerColor = 'hsla(240, 80%, 80%, ' + 0.5 * opacity + ')',
			patternColor = 'hsla(240, 80%, 80%, ' + 0.8 * opacity + ')',
			gradient = context.createRadialGradient(0, this.baseCPY, 0, 0, this.baseCPY, this.baseY - this.baseCPY);
		gradient.addColorStop(0, 'hsla(245, 100%, 100%, ' + opacity + ')');
		gradient.addColorStop(0.5, 'hsla(245, 100%, 80%, ' + 0.6 * opacity + ')');
		gradient.addColorStop(1, 'hsla(245, 100%, 60%, ' + 0.4 * opacity + ')');
		context.fillStyle = gradient;
		context.strokeStyle = patternColor;
		context.lineWidth = 2;
		var baseX = this.baseX * (1 + this.expansionOffset * Math.cos(this.expansion)),
			theta = Math.PI / 2 - Math.abs((Math.PI - this.expansion)) / 2;
		context.save();
		this.createHead(context, baseX);
		context.restore();
		this.createMainPattern(context, baseX);
		this.createSubPattern(context, 0, this.baseCPY * 0.45, 0);
		this.createSubPattern(context, -7, this.baseCPY * 0.4, -theta);
		this.createSubPattern(context, 7, this.baseCPY * 0.4, theta);
		this.createFeeler(context, feelerColor);
		context.restore();
		if(this.expansion >= Math.PI - this.expansionDelta && this.expansion <= Math.PI){
			this.expansion += this.expansionDelta / this.EXTENSION_COUNT;
		}else{
			this.expansion += this.expansionDelta;
		}
		this.expansion %= Math.PI * 2;
		this.x += this.vx;
		this.y += this.vy;
		if(this.expansion >= 0 && this.expansion <= Math.PI){
			this.vx += this.ax;
			this.vy += this.ay;
		}
		this.vx *= this.FRICTION;
		this.vy *= this.FRICTION;
		this.judgeToReset();
	},
	createHead : function(context, baseX){
		context.beginPath();
		context.moveTo(-baseX, this.baseY);
		context.bezierCurveTo(-this.baseCPX, this.baseCPY, this.baseCPX, this.baseCPY, baseX, this.baseY);
		context.closePath();
		context.fill();
	},
	createMainPattern : function(context, baseX){
		context.beginPath();
		context.moveTo(-baseX * 0.6, this.baseY);
		context.bezierCurveTo(-this.baseCPX * 0.8, this.baseCPY * 0.5, this.baseCPX * 0.8, this.baseCPY * 0.5, baseX * 0.6, this.baseY);
		context.stroke();
	},
	createSubPattern : function(context, translateX, translateY, rotate){
		context.save();
		context.beginPath();
		context.translate(translateX, translateY);
		context.rotate(rotate);
		context.scale(1, 0.5);
		context.arc(0, 0, 4, 0, Math.PI * 2, false);
		context.stroke();
		context.restore();
	},
	createFeeler : function(context, feelerColor){
		for(var i = -3; i <= 3; i++){
			context.save();
			context.beginPath();
			context.strokeStyle = feelerColor;
			context.translate(i * 2, this.baseY);
			context.moveTo(0, 0);
			var x, cy;
			if(this.expansion >= 0 && this.expansion <= Math.PI){
				cy = (Math.PI - this.expansion) / Math.PI;
				x = i * this.feelerWidth * cy;
			}else{
				cy = (this.expansion - Math.PI) / Math.PI;
				x = i * this.feelerWidth * cy;
			}
			var rate = (cy > 0.5) ? (1 - cy) : cy;
			context.bezierCurveTo(x * this.extensionRate, this.feelerLength * rate, x * this.extensionRate, this.feelerLength * (1 - rate), x, this.feelerLength);
			context.stroke();
			context.restore();
		}
	},
	judgeToReset : function(){
		if(this.x < -this.OFFSET_TO_JUDGE && this.vx < 0 || this.x > this.renderer.width + this.OFFSET_TO_JUDGE && this.vx > 0
			|| this.y < -this.OFFSET_TO_JUDGE && this.vy < 0 || this.y > this.renderer.height + this.OFFSET_TO_JUDGE && this.vy > 0){
			this.init(false);
		}
	}
};
var DUST = function(renderer){
	this.renderer = renderer;
	this.init();
};
DUST.prototype = {
	RADIUS : 5,
	VELOCITY : 0.1,
	init : function(){
		var phi = this.renderer.getRandomValue({min : 0, max : Math.PI * 2});
		this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width});
		this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height});
		this.vx = this.VELOCITY * Math.sin(phi);
		this.vy = this.VELOCITY * Math.cos(phi);
		this.opacity = 0;
		this.theta = 0;
		this.deltaTheta = this.renderer.getRandomValue({min : Math.PI / 500, max : Math.PI / 100});
		this.gradient = this.renderer.context.createRadialGradient(0, 0, 0, 0, 0, this.RADIUS);
		this.gradient.addColorStop(0, 'hsla(220, 80%, 100%, 1)');
		this.gradient.addColorStop(0.1, 'hsla(220, 80%, 80%, 1)');
		this.gradient.addColorStop(0.25, 'hsla(220, 80%, 50%, 1)');
		this.gradient.addColorStop(1, 'hsla(220, 80%, 30%, 0)');
	},
	render : function(context, x, y){
		context.save();
		context.translate(this.x, this.y);
		context.globalAlpha = Math.abs(Math.sin(this.theta)) * (0.2 + 0.8 * Math.pow(Math.min(1, Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2)) / this.renderer.distance), 2));
		context.fillStyle = this.gradient;
		context.beginPath();
		context.arc(0, 0, this.RADIUS, 0, Math.PI * 2, false);
		context.fill();
		context.restore();
		this.x += this.vx;
		this.y += this.vy;
		this.theta += this.deltaTheta;
		this.theta %= Math.PI * 2;
		if(this.x < -this.RADIUS || this.x > this.renderer.width + this.RADIUS
			|| this.y < -this.RADIUS || this.y > this.renderer.height + this.RADIUS){
			this.init();
		}
	}
};
$(function(){
	RENDERER.init();
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 滑动星星打分 全屏焦点图 h5弹窗动画 html5弹窗动画 全屏切换 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 其他 h5按钮动画 html5按钮动画 图片全屏 h5图片动画 h5图标动画 html5图片动画 html5图标动画 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到