Animation simple ligne JS/Canvas

Je voudrais faire une animation d'une seule ligne en utilisant JavaScript et Canvas. Je peux le faire sans aucun problème, sauf:Animation simple ligne JS/Canvas

cela fonctionne très bien si vous essayez de faire une ligne droite - j'ai un intervalle (10ms) en ajoutant 1px, donc si ça va de 150px (x)/20px (Y) à 150px (X)/200px (Y) - tout a l'air cool.

problème est avec des lignes allant vers la droite ou à gauche - par exemple de 150px (x)/20px (Y) à 35px (X)/200px (Y)

Ici mon animation échoue parce que en ajoutant 1px tous les 10ms à la fois X et Y fait la ligne frapper le côté gauche (35px) d'abord et ensuite aller de là à mon point final Y.

Voici mon code (vous aurez besoin de Firefox ou Opera) - comme vous pouvez le voir la ligne frappe le côté gauche plus tôt et c'est mon problème. :(

<html> 
<script type="text/javascript" src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script> 
<style> 
body {background: #fff; color: #ccc;} 
</style> 

<script type="text/javascript"> 
var startpointx = 150; 
var startpointy = 25; 
var curposx = 150; 
var curposy = 25; 
var myinterval; 

function init() { 
     myinterval = setInterval(' animate(35, 250) ', 10); 
} 

function random (n) 
{ 
    return (Math.floor (Math.random() * n)); 
} 

function animate(endpointx, endpointy) { 
     if (curposx == endpointx && curposy == endpointy){ 
      clearInterval(myinterval); 
      drawShape(endpointx, endpointy); 
      return false; 
     } else { 

      if(curposx != endpointx){ 
       if(endpointx > curposx) { 
        curposx = curposx + 1; 
       } else { 
        curposx = curposx - 1; 
       } 
      } 
      if(curposy <= endpointy){ 
      curposy = curposy + 1; 
      } 
     } 
    drawShape(curposx, curposy, "#000"); 
} 

function drawShape(tendpointx, tendpointy, clor){ 
    var canvas = document.getElementById('cnvs'); 
    var ctx = canvas.getContext('2d'); 

     ctx.clearRect(0,0,310,400); 
     ctx.strokeStyle = clor; 
     ctx.beginPath(); 
     ctx.moveTo(startpointx ,startpointy); 
     ctx.lineTo(tendpointx,tendpointy); 
     ctx.stroke(); 
} 

// 
init(); 

</script> 


<body> 
<canvas id="cnvs" width="310" height="400" style="border: 1px solid #ccc;"></canvas> 
</body> 
</html>

Source

2009-11-18 jack moore

Supposons que vous voulez tracer une ligne droite du point (0, 0) à (100, 200). La distance horizontale est de 100, la distance verticale est de 200, ce qui signifie que lorsque vous déplacez votre fin Point de 1 pixel horizontalement, il faut déplacer de 2 pixels verticalement (ou, pour un pixel verticalement 0,5 pixel horizontalement)

pour calculer la différence de pouvoir utiliser cet algorithme.

var deltaX = Math.abs(endpointx - startpointx); 
    var deltaY = Math.abs(endpointy - startpointy); 
    var diffX = 1, diffY = 1; 
    if(deltaX > deltaY){ 
     diffY = deltaY/deltaX; 
    } 
    else if(deltaX < deltaY) { 
     diffX = deltaX/deltaY; 
    }

Puis, en votre animation vous devez incrémenter/décrémenter le curposx et le curetage pas par 1, mais par diffX et diffY respectivement. Ce calcul doit être fait en dehors de votre fonction animate() (car il renvoie toujours le même résultat).

Source

2009-11-18 14:34:33 pawel

A travaillé comme un charme. Merci Monsieur. :) –

Animation simple ligne JS/Canvas

Répondre

Questions connexes