Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - moveLiner()</title>
<script>
var can, ctx;
var fps=24;
var posX=0;
var posY=0;

/*** INIT ***/
function init() {
 can = document.getElementById('kan1');
 if (can.getContext) {
  ctx = can.getContext('2d');
  
  //function call to animations
  moveLinear(30,10, 100,100, 100);
  
 }
 else document.getElementById('kan11')
              .innerHTML='Vaš browser ne podržava CANVAS tag!';
}

/*** DRAW RECTANGLE ***/
function drawRect(posX,posY,strokeColor) {
 ctx.strokeStyle = strokeColor;
 ctx.strokeRect(posX,posY, 100,100);
}

/*** ANIMATION ***/
function moveLinear(fromX,fromY,toX,toY,speed) {
 
 //distance s
 var dx = toX - fromX;
 var dy = toY - fromY;
 var s = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2));
 
 //total time of animation Ta
 var Ta = s / speed; //sec
 
 //frame interval Tf
 var Tf = 1 / fps; //sec
 
 //frame path (put koji prijeđe za vrijeme trajanja frejma)
 var dxf = (Tf*dx)/Ta;
 var dyf = (Tf*dy)/Ta;
 
 //moving pozicije
  posX = posX + fromX + dxf;
  posY = posY + fromY + dyf;

console.log(posX+'-'+toX);
 console.log(Ta);
 
 //clear canvas
 ctx.clearRect(0,0,can.width,can.height);
 
 //draw
 drawRect(posX,posY,'green');
 
 if (posX<toX) {
  setTimeout(
   function(){
    moveLinear(fromX,fromY,toX,toY,speed);
   },
   1000*Tf
  );
 }
 else return false;

}

/*** ONLOAD ***/
window.onload=init;
</script>
</head>
<body>
 
Pomak zelenog kvadrata.

<br>
<br>
<canvas id="kan1" width="300" height="300" style="border:1px solid #DDDDDD;">
 <span id="kan11">Vaš browser ne podržava CANVAS element!</span>
</canvas>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/76move_linear.html.