html5 анимация холста вдоль оси x и y

Question

Попытка анимировать объект вдоль холста x-& ось y в положительном и отрицательном направлениях с использованием операторов 4 if. То, что ускользает (я новичок в JS), - это то, почему у меня возникают проблемы с анимацией вдоль отрицательной оси y-&, также, когда я комментирую четвертое, если отрицательное движение по оси X возможно, но не работает когда он активен.

Я предполагаю, что что-то не так с условиями в операторах if. Но в настоящее время я не знаю.

http://pastebin.com/8ECXG4n0

Answer 1

Основная ловушка состоит в том, что из-за вращения, размер направления должен быть использован, который в этом случае всегда является шириной. Для текущего размера это не очевидно, если ширина отличается от высоты, вы увидите результат (в приведенном ниже примере я изменил размеры для тестирования).

Трик 2 привязать позицию X/Y после изменения направления, потому что тогда высота становится ширина и наоборот

 x += dirX * multiplier; 
    y += dirY * multiplier; 
    var margin = 10; 

    if(dirX > 0 && x > cW - margin - width){ 
     degree = 90; dirX = 0; dirY = 1; 
     x = cW - margin; 
    } 
    else if(dirY > 0 && y > cH - margin - width){ 
     degree = 180; dirX = -1; dirY = 0; 
     y = cH - margin; 
    } 
    else if(dirX < 0 && x < margin + width){ 
     degree = 270; dirX = 0; dirY = -1; 
     x = margin; 
    } 
    else if(dirY < 0 && y < margin + width){ 
     degree = 0; dirX = 1; dirY = 0; 
     y = margin; 
    } 

Полный пример кода (остальная часть кода не изменяется, за исключением некоторого переключения ширина и высота для изменения формы):

 var canvas, ctx, x, y, dir, width, height, radius, height_rect, degree, dirX, dirY; 
 
     
 
    function anim() { 
 
     var multiplier = 3; 
 
     var cW = canvas.width; 
 
     var cH = canvas.height; 
 
     width = 100; 
 
     height = 60; 
 
     radius = height/2; 
 
     height_rect = width - radius; 
 
     ctx.clearRect(0, 0, cW, cH); 
 
     ctx.fillStyle = "magenta"; 
 
     ctx.strokeStyle = "magenta"; 
 
     ctx.lineWidth = 1; 
 
     ctx.save(); 
 
     ctx.translate(x, y); 
 
     ctx.rotate(degree * Math.PI/180); 
 
     ctx.translate(-x, -y); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(x, y); 
 
     ctx.lineTo(x + height_rect, y); 
 
     ctx.arc(x + height_rect, y + radius, radius, - Math.PI/2, Math.PI/2); 
 
     ctx.lineTo(x, y + height); 
 
     ctx.closePath(); 
 
     ctx.fill(); 
 
     ctx.stroke(); 
 
     ctx.restore(); 
 
     
 
     
 
     x += dirX * multiplier; 
 
     y += dirY * multiplier; 
 
     var margin = 10; 
 
      
 
     if(dirX > 0 && x > cW - margin - width){ 
 
      degree = 90; dirX = 0; dirY = 1; 
 
      x = cW - margin; 
 
     } 
 
     else if(dirY > 0 && y > cH - margin - width){ 
 
      degree = 180; dirX = -1; dirY = 0; 
 
      y = cH - margin; 
 
     } 
 
     else if(dirX < 0 && x < margin + width){ 
 
      degree = 270; dirX = 0; dirY = -1; 
 
      x = margin; 
 
     } 
 
     else if(dirY < 0 && y < margin + width){ 
 
      degree = 0; dirX = 1; dirY = 0; 
 
      y = margin; 
 
     } 
 
    
 
      
 

 
        
 
      requestAnimationFrame(anim); 
 
    } 
 
    
 
     function init() { 
 
     canvas = document.getElementById("cvsAnim"); 
 
     ctx = canvas.getContext("2d"); 
 
     x = 10; y = 10; dirX = 1; dirY = 0; 
 
     degree = Math.PI/2; 
 
     anim(); 
 
     } 
 
     
 

 
init();

canvas{ 
 
    border: 1px solid; 
 
}

<canvas id="cvsAnim" width="400" height="400" style="background-color:"black"> 
 
<div id="animBox"></div>