JS / Canvas однострочная анимация - PullRequest
Новая
       13

JS / Canvas однострочная анимация

3 голосов
/ 18 ноября 2009

Я бы хотел сделать анимацию из одной строки, используя JavaScript и тег Canvas. Я могу сделать это без проблем, кроме:

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

Проблема в том, что линии идут вправо или влево - например, от 150px (x) / 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>

1 Ответ

3 голосов
/ 18 ноября 2009

Допустим, вы хотите нарисовать прямую линию от точки (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 () (потому что он всегда возвращает один и тот же результат).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...