JS/Canvas single line animation

Я хотел бы сделать анимацию одной строки с использованием тегов JavaScript и Canvas. Я могу сделать это без каких-либо проблем, кроме:JS/Canvas single line animation

он отлично работает, если вы пытаетесь сделать прямую линию - у меня есть интервал (10 мс), добавляющий 1px, поэтому, если он идет от 150px (x)/20px (Y) до 150px (X)/200px (Y) - все выглядит круто.

Проблема с линии будет вправо или влево - например, из 150px (х)/20px (Y) на 35px (X)/200px (Y)

Вот моя анимация терпит неудачу, потому что, добавляя 1px каждый 10мс и к X и Y делает линию хит левой стороны (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 пиксел по горизонтали, необходимо переместить его на 2 пикселя по вертикали (или, для одного пикселя по вертикали 0,5 пикселя по горизонтали)

чтобы вычислить разницу вы можете использовать этот алгоритм:.

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/Canvas single line animation

ответ

Смежные вопросы