mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
function createGraph( t, f, c ) {
|
|
|
|
var div = document.createElement( 'div' );
|
|
div.style.display = 'inline-block';
|
|
div.style.width = '200px';
|
|
div.style.height = '120px';
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.width = 180;
|
|
canvas.height = 100;
|
|
|
|
var context = canvas.getContext( '2d' );
|
|
context.fillStyle = "rgb(250,250,250)";
|
|
context.fillRect( 0, 0, 180, 100 );
|
|
|
|
context.lineWidth = 0.5;
|
|
context.strokeStyle = "rgb(230,230,230)";
|
|
|
|
context.beginPath();
|
|
context.moveTo( 0, 20 );
|
|
context.lineTo( 180, 20 );
|
|
context.moveTo( 0, 80 );
|
|
context.lineTo( 180, 80 );
|
|
context.closePath();
|
|
context.stroke();
|
|
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = "rgb(255,127,127)";
|
|
|
|
var position = { x: 5, y: 80 };
|
|
var position_old = { x: 5, y: 80 };
|
|
|
|
new TWEEN.Tween( position ).to( { x: 175 }, 2000 ).easing( TWEEN.Easing.Linear.None ).start();
|
|
new TWEEN.Tween( position ).to( { y: 20 }, 2000 ).easing( f ).onUpdate( function () {
|
|
|
|
context.beginPath();
|
|
context.moveTo( position_old.x, position_old.y );
|
|
context.lineTo( position.x, position.y );
|
|
context.closePath();
|
|
context.stroke();
|
|
|
|
position_old.x = position.x;
|
|
position_old.y = position.y;
|
|
|
|
}).start();
|
|
|
|
div.appendChild( document.createTextNode( t ) );
|
|
div.appendChild( document.createElement( 'br' ) );
|
|
div.appendChild( canvas );
|
|
|
|
return div;
|
|
}
|
|
|
|
|