<h1>Canvas Element</h1>
<p style="font: 12px sans-serif;">height: <span id="h"></span><br/>velocity: <span id="v"></span></p>
<canvas id="canvas" style="border: 1px solid blue;">Not Supported</canvas>
<p style="font: 12px sans-serif;">height: <span id="h"></span><br/>velocity: <span id="v"></span></p>
<canvas id="canvas" style="border: 1px solid blue;">Not Supported</canvas>
<script>
var Lucia = Lucia || {};
Lucia.UpDown = function(){
this.ws = 500; // width screen
this.hs = 300; // height screen
this.canvas = document.getElementById('canvas');
this.dh = document.getElementById('h');
this.dv = document.getElementById('v');
this.canvas.width = this.ws;
this.canvas.height = this.hs;
this.ctx = this.canvas.getContext('2d');
this.xo = 10;
this.hAfter = 1;
this.width = 30; // width of the object
this.height = 20; // height of the object
this.vBefore = 70; // early velocity. default 50
this.dt = 0.05; // how fast the speed. default 0.1
this.g = 10;
this.vAfter = 0; // velocity thereafter
this.hBefore = 0; //
}
// setting for dt
Lucia.UpDown.prototype.setDeltaT = function(dt){
this.dt = dt;
}
// set the initial velocity
Lucia.UpDown.prototype.setInitialVelocity = function(v){
this.vBefore = v;
}
// set the height of the canvas
Lucia.UpDown.prototype.setHeight = function(h){
this.hs = h;
this.canvas.height = this.hs;
}
// this function do update for the box drawing
Lucia.UpDown.prototype.move = function(tmo){
// draw the box
this.ctx.fillStyle = '#88f';
// clear the canvas
this.ctx.clearRect(0, 0, this.ws, this.hs);
// apply the equation
this.hAfter = this.hBefore + this.vBefore*this.dt - 0.5*this.g*this.dt*this.dt;
this.vAfter = this.vBefore-this.g*this.dt;
// update the box
this.ctx.fillRect(this.xo, (this.hs-this.height-this.hAfter), this.width, this.height);
// displaying the data to screen
this.dh.innerHTML = Math.round(this.hAfter);
this.dv.innerHTML = Math.round(this.vAfter);
// swapping before and after variable
this.hBefore = this.hAfter;
this.vBefore = this.vAfter;
// set the timer
var lol = this;
setTimeout(function(){lol.move(tmo);},tmo);
}
var data = new Lucia.UpDown();
data.setHeight(100)
data.setDeltaT(0.1)
data.setInitialVelocity(50)
data.move(100)
</script>
No comments:
Post a Comment