<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在海里</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{
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
canvas{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="jsi-sea-container" class="container"></div>
<script type="text/javascript">
var HAMMERHEAD_RENDERER = {
HAMMERHEAD_COUNT : 10,
ADD_INTERVAL : 3,
DELTA_THETA : Math.PI / 1000,
ADJUST_DISTANCE : 50,
ADJUST_OFFSET : 10,
init : function(){
this.setParameters();
this.reconstructMethod();
this.createHammerHeads(this.INIT_HAMMERHEAD_COUNT);
this.bindEvent();
this.render();
},
setParameters : function(){
this.$window = $(window);
this.$container = $('#jsi-sea-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
this.interval = this.ADD_INTERVAL;
this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
this.x = this.width;
this.destinationX = this.x;
this.theta = 0;
this.hammerheads = [];
},
reconstructMethod : function(){
this.render = this.render.bind(this);
},
createHammerHeads : function(){
for(var i = 0, length = this.HAMMERHEAD_COUNT; i < length; i++){
this.hammerheads.push(new HAMMERHEAD(this.width, this.height));
}
},
bindEvent : function(){
this.$container.on('mousemove', this.changeView.bind(this, false));
this.$container.on('mouseout', this.changeView.bind(this, true));
},
changeView : function(toAdjust, event){
this.destinationX = event.clientX - this.$container.offset().left + this.$window.scrollLeft();
if(!toAdjust){
return;
}
if(this.destinationX < this.ADJUST_OFFSET){
this.destinationX = 0;
}else if(this.distanceX > this.width - this.ADJUST_OFFSET){
this.destinationX = this.width;
}
},
render : function(){
requestAnimationFrame(this.render);
var gradient = this.context.createRadialGradient(this.width / 2, this.height / 2, 0, this.width / 2, this.height / 2, this.distance),
rate = (1 + 0.2 * Math.sin(this.theta));
gradient.addColorStop(0, 'hsl(195, 80%, ' + (90 * rate) + '%)');
gradient.addColorStop(0.2, 'hsl(195, 100%, ' + (50 * rate) + '%)');
gradient.addColorStop(1, 'hsl(220, 100%, ' + (10 * rate) + '%)');
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
this.hammerheads.sort(function(hammerhead1, hammerhead2){
return hammerhead1.z - hammerhead2.z;
});
for(var i = this.hammerheads.length - 1; i >= 0; i--){
if(!this.hammerheads[i].render(this.context)){
this.hammerheads.splice(i, 1);
}
}
this.context.clearRect(this.x, 0, this.width - this.x, this.height);
if(this.interval-- == 0){
this.interval = this.ADD_INTERVAL;
this.hammerheads.push(new HAMMERHEAD(this.width, this.height));
}
this.theta += this.DELTA_THETA;
this.theta %= Math.PI * 2;
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);
}
}
};
var HAMMERHEAD = function(width, height){
this.width = width;
this.height = height;
this.init();
};
HAMMERHEAD.prototype = {
COLOR : 'hsl(220, %s%, 30%)',
ANGLE_RANGE : {min : -Math.PI / 8, max : Math.PI / 8},
INIT_SCALE : 0.1,
MAX_Z : 10,
DELTA_PHI : Math.PI / 80,
VELOCITY : 3,
VERTICAL_THRESHOLD : 80,
init : function(){
this.theta = this.ANGLE_RANGE.min + (this.ANGLE_RANGE.max - this.ANGLE_RANGE.min) * Math.random();
this.x = this.width / 2 + this.width / 4 * this.theta / Math.PI * 8;
this.y = this.height + this.VERTICAL_THRESHOLD * this.INIT_SCALE;
this.z = Math.random() * this.MAX_Z;
this.vx = -this.VELOCITY * Math.cos(this.theta + Math.PI / 2);
this.vy = -this.VELOCITY * Math.sin(this.theta + Math.PI / 2);
this.phi = Math.PI * 2 * Math.random();
this.color = this.COLOR.replace('%s', 90 - 60 * this.z / this.MAX_Z | 0);
},
render : function(context){
var tailX = 20 * Math.sin(this.phi),
angle = Math.sin(this.phi),
height = this.height + this.VERTICAL_THRESHOLD,
scale = this.INIT_SCALE + (1 - this.INIT_SCALE) * (height - this.y) / height * (this.MAX_Z - this.z) / this.MAX_Z;
context.save();
context.fillStyle = this.color;
context.translate(this.x, this.y);
context.scale(scale, scale);
context.rotate(this.theta);
context.beginPath();
context.moveTo(-20, -40);
context.bezierCurveTo(-8, -48, 8, -48, 20, -40);
context.lineTo(20, -28);
context.lineTo(8, -36);
context.lineTo(8, -8);
context.lineTo(20, 4 + 6 * angle);
context.lineTo(8, 0);
context.lineTo(6, 16);
context.quadraticCurveTo(4, 32, tailX, 64);
context.quadraticCurveTo(-4, 32, -6, 16);
context.lineTo(-8, 0);
context.lineTo(-20, 4 - 6 * angle);
context.lineTo(-8, -8);
context.lineTo(-8, -36);
context.lineTo(-20, -28);
context.closePath();
context.fill();
context.save();
context.beginPath();
context.translate(tailX, 64);
context.rotate(-Math.sin(this.phi) * Math.PI / 6);
context.moveTo(0, -5);
context.lineTo(10, 15);
context.lineTo(0, 5);
context.lineTo(-10, 15);
context.closePath();
context.fill();
context.restore();
context.restore();
this.x += this.vx * scale;
this.y += this.vy * scale;
this.phi += this.DELTA_PHI;
this.phi %= Math.PI * 2;
return this.y >= -this.VERTICAL_THRESHOLD;
}
};
var MANTA_RENDERER = {
MANTA_COUNT : 3,
ADD_INTERVAL : 30,
DELTA_THETA : Math.PI / 1000,
init : function(){
this.setParameters();
this.reconstructMethod();
this.createMantas();
this.render();
},
setParameters : function(){
this.$container = $('#jsi-sea-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
this.interval = this.ADD_INTERVAL;
this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
this.theta = 0;
this.mantas = [];
},
reconstructMethod : function(){
this.render = this.render.bind(this);
},
createMantas : function(){
for(var i = 0, length = this.MANTA_COUNT; i < length; i++){
this.mantas.push(new MANTA(this.width, this.height, this.context));
}
},
render : function(){
requestAnimationFrame(this.render);
var gradient = this.context.createRadialGradient(this.width / 2, this.height / 2, 0, this.width / 2, this.height / 2, this.distance),
rate = (1 + 0.2 * Math.sin(this.theta));
gradient.addColorStop(0, 'hsl(195, 80%, ' + (60 * rate) + '%)');
gradient.addColorStop(0.2, 'hsl(195, 100%, ' + (40 * rate) + '%)');
gradient.addColorStop(1, 'hsl(220, 100%, ' + (5 * rate) + '%)');
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
this.mantas.sort(function(manta1, manta2){
return manta1.z - manta2.z;
});
for(var i = this.mantas.length - 1; i >= 0; i--){
if(!this.mantas[i].render(this.context)){
this.mantas.splice(i, 1);
}
}
if(this.interval-- == 0){
this.interval = this.ADD_INTERVAL;
this.mantas.push(new MANTA(this.width, this.height, this.context));
}
this.theta += this.DELTA_THETA;
this.theta %= Math.PI * 2;
}
};
var MANTA = function(width, height, context){
this.width = width;
this.height = height;
this.init(
html5 canvas实现的海底世界鱼类游动动画特效源码.zip
版权申诉
5星 · 超过95%的资源 87 浏览量
2022-11-03
23:34:23
上传
评论
收藏 35KB ZIP 举报 
html5 canvas实现的海底世界鱼类游动动画特效源码.zip （2个子文件） 
132692079743595595 
index.html 12KB js 
jquery.min.js 91KB资源评论
彭钟乐2022-12-02资源很不错，内容和描述一致，值得借鉴，赶紧学起来！
易小侠
- 粉丝: 6453
- 资源: 9万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
