Question

尝试沿着画布动画对象x-＆amp;使用4 if语句在正方向和负方向上的y轴。躲过的事情（我是JS的新手）我就是为什么我会在负x-和...之间设置问题动画。 y轴，当我注释掉第四个if语句时，沿着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>

沿着x-＆amp;的html5画布动画y轴

1 个答案: