JS/캔버스 싱글 라인 애니메이션

자바 스크립트와 캔버스 태그를 사용하여 한 줄짜리 애니메이션을 만들고 싶습니다. 나는 어떤 문제도없이 그것을 할 수 있어요 :JS/캔버스 싱글 라인 애니메이션

만약 당신이 직선을하려고한다면 잘 작동합니다 - 저는 150px (x)에서 150px/20px (Y) ~ 150px (X)/200px (Y) - 모든 것이 멋지게 보입니다. 때문에 1 픽셀마다 추가하여 35px에 150 픽셀 (X)/20 픽셀 (Y)에서 예 (X)/200 픽셀 (Y) 여기 내 애니메이션 실패

을 -

문제점 라인이 오른쪽으로 이동 또는 왼쪽으로 인 X와 Y 모두 10ms로 설정하면 라인이 왼쪽 (35px)으로 먼저 이동 한 다음 거기에서 내 종점 Y로 이동합니다.

내 코드는입니다 (Firefox 또는 Opera가 필요합니다). 라인 히트가 곧 왼쪽으로 치고 그게 내 문제 야. :(

<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>

출처

2009-11-18 jack moore

하는의 당신이 (0, 0) (100, 200)에 지점으로부터 직선을 그릴하기를 원하는 경우를 생각 해보자. 수평 거리가 100, 수직 거리 당신이 당신의 끝을 이동할 때 즉, 200 가로 1 개 화소 별 포인트는 (하나 개의 화소 가로 세로 0.5 화소 또는) 수직으로 2 픽셀 이동해야

는이 알고리즘 사용의 차이를 계산하려면.에이어서

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; 
    }

을 curposx와 curposy를 1 씩 증가/감소시키지 않고 diffX로 애니메이션해야합니다. diffY 각각. 이 계산은 animate() 함수 외부에서 수행되어야합니다 (항상 동일한 결과를 반환하기 때문에).

출처

2009-11-18 14:34:33 pawel

매력처럼 작동했습니다. 감사합니다. :) –

JS/캔버스 싱글 라인 애니메이션

답변

관련 문제