旋转华尔兹
模仿动画，效果没有达到作者。缺少曲线。突然发现，初中数学函数没学好。。。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0px;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id = "S" width="400px" height="400px"></canvas>
<script type="text/javascript">
var position =
{
_x : null,
_y : null,
create : function ( x, y )
{
var obj = Object.create( this );
obj.setX( x );
obj.setY( y );
return obj;
},
setX : function ( x )
{
this._x = x;
},
setY : function ( y )
{
this._y = y;
},
getX : function ()
{
return this._x;
},
getY : function ()
{
return this._y;
}
};
var point =
{
_pos : null,
create : function ( quad_pos, quad_size, angle )
{
var obj = Object.create( this );
var x = quad_pos.getX() + quad_size * Math.cos( angle );
var y = quad_pos.getY() + quad_size * Math.sin( angle );
obj.setPos( x, y );
return obj;
},
setPos : function ( x, y )
{
this._pos = position.create( x, y );
},
getPos : function ()
{
return this._pos;
}
};
var quad =
{
_size : null,
_points : null,
_pos : null,
_angle : null,
create : function( quad_size, x, y )
{
var obj = Object.create( this );
var quad_pos = position.create( x, y );
obj.setSize( quad_size );
obj.setPos( quad_pos );
obj.setAngle( 0 );
obj.setPoints(
[
point.create( quad_pos, quad_size, 0 ),
point.create( quad_pos, quad_size, Math.PI * 0.5 ),
point.create( quad_pos, quad_size, Math.PI ),
point.create( quad_pos, quad_size, Math.PI * 1.5 )
]
);
return obj;
},
update : function()
{
var quad_pos = this.getPos();
var len = this._points.length;
var newAngle = this.getAngle() + deltaAngel;
var temp_x, temp_y;
newAngle = ( newAngle > Math.PI * 2 ) ? 0 : newAngle;
this.setAngle( newAngle );
for( var i = 0; i < len; ++i )
{
temp_x = Math.cos( newAngle ) * this.getSize() + quad_pos.getX();
temp_y = Math.sin( newAngle ) * this.getSize() + quad_pos.getY();
//alert( temp_x + temp_y );
this._points[i].setPos( temp_x, temp_y );
newAngle += Math.PI * 0.5;
}
},
setPoints : function ( points )
{
this._points = points;
},
getPoints : function ()
{
return this._points;
},
setSize : function ( quad_size )
{
this._size = quad_size;
},
getSize : function ()
{
return this._size;
},
setPos : function ( quad_pos )
{
this._pos = quad_pos;
},
getPos : function ()
{
return this._pos;
},
setAngle : function ( angle )
{
this._angle = angle;
},
getAngle : function ()
{
return this._angle;
}
};
function update()
{
var quads_len = quads.length;
for( var i = 0; i < quads_len; ++i )
{
quads[i].update();
}
}
function render()
{
var quads_len = quads.length;
context.fillStyle = '#352B4E';
context.strokeStyle = '#33C1B5';
context.globalAlpha = 0.15;
context.fillRect( 0, 0, canvas.width, canvas.height );
context.globalAlpha = 1;
context.fillStyle = '#FAFFD9';
for( var i = 0; i < quads_len; ++i )
{
var temp_quad = quads[i];
var temp_quad_points = temp_quad.getPoints();
var points_len = temp_quad_points.length;
for( var j = 0; j < points_len; ++j )
{
var from =
{
x : temp_quad_points[j].getPos().getX(),
y : temp_quad_points[j].getPos().getY()
};
var to = null;
if( j + 1 < points_len )
{
to =
{
x : temp_quad_points[j + 1].getPos().getX(),
y : temp_quad_points[j + 1].getPos().getY()
};
}
else
{
to =
{
x : temp_quad_points[0].getPos().getX(),
y : temp_quad_points[0].getPos().getY()
};
}
context.beginPath();
context.moveTo( from.x, from.y );
context.arc( from.x, from.y, 3, 0, Math.PI * 2 );
context.lineTo( to.x, to.y );
context.arc( to.x, to.y, 3, 0, Math.PI * 2 );
context.stroke();
context.fill();
context.closePath();
}
}
}
function loop()
{
update();
render();
requestAnimationFrame( loop );
}
function create()
{
var length = 32;
var width = window.innerWidth;
var height = window.innerHeight;
for( var i = 0; i < length; ++i )
{
var x = width >> 1;
var y = ( i / length ) * ( height >> 1 ) + ( height >> 2 );
var size = Math.sin( ( i / length ) * ( Math.PI ) ) * ( width >> 3 );
quads.push( quad.create( size, x, y ) );
}
}
var quads = [];
var canvas = document.getElementById( "S" );
var context = canvas.getContext( "2d" );
var deltaAngel = Math.PI / 200.0;
window.onload = function()
{
canvas.style.width = window.innerWidth + "px";
setTimeout(function () {
canvas.style.height = window.innerHeight + "px";
}, 0 );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
create();
loop();
}
</script>
</body>
</html>
版权声明：本文博主原创文章，博客，未经同意不得转载。
