检查对象何时到达画布边框并执行其他动画

Question

物体从60°的顶部中心角向下移动到左侧。当它到达画布边缘时它出现在相同高度/距离的相对边缘，并保持朝同一方向移动到中心顶部。 所以我到目前为止的第一部分是向下移动，我需要做的是：

1）检查它何时到达画布边框 2）在相同的高度和距离处转换到相对侧。
3）移动到开始位置。

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var x = 0,
  y = 0;

function draw() {
  ctx.beginPath();
  ctx.moveTo(x + 135, y + 15); //50
  ctx.lineTo(x + 135, y + 80);
  ctx.lineWidth = 5;
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.strokeStyle = 'orange';
  ctx.moveTo(x + 105, y + 20);
  ctx.bezierCurveTo(x + 135, y + 5, x + 135, y + 5, x + 165, y + 20);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(x + 165, y + 20, 15, 0.5 * Math.PI, 1.5 * Math.PI, true);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(x + 165, y + 60, 20, 0.5 * Math.PI, 1.5 * Math.PI, true);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(x + 165, y + 20, 10, 0.5 * Math.PI, 1.5 * Math.PI, true);
  ctx.fillStyle = "#7CFC00";
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(x + 165, y + 60, 15, 0.5 * Math.PI, 1.5 * Math.PI, true);
  ctx.fillStyle = "#458B00";
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.strokeStyle = 'green';
  ctx.moveTo(x + 165, y + 5);
  ctx.lineTo(x + 165, y + 80);
  ctx.lineWidth = 3;
  ctx.stroke();
  ctx.closePath();

  x = x - 2;
  y = y + 1.5;
  ctx.fillStyle = "rgba(34,45,23,0.4)";
  ctx.fillRect(0, 0, can.width, can.height);
  requestAnimationFrame(draw);
  //ctx.clearRect(0,0,can.width,can.height);
}
draw();

<canvas id="canvas" width="500" height="500"></canvas>

可能我需要包含一些if-else语句来检查x和y，但是我做了并且它没有显示任何内容，非常感谢你的帮助。

Answer 1

小行星风格环绕

我假设你需要一个小行星式环绕。这意味着图像必须最多绘制四次，顶部和底部，左右，有时从右下角到左上角。

为了简化渲染，我将您的日志绘制到图像上，然后每次都只绘制该图像而不是整个渲染过程。它更快。

如果您希望动画在某个时刻停止，则需要对坐标进行测试。

我在画布上添加了一个方框。当徽标的左上角位于此框内时，动画将结束。从水平环绕约四次打到盒子。当然，您可以将盒子放在任何地方，并将其制成任何尺寸。

＆＃13;

＆＃13;

// function creates a canvas and adds a context 
var createImage=function(w,h){var i=document.createElement("canvas");i.width=w;i.height=h;i.ctx=i.getContext("2d");return i;}

// renders the logo to ctx;
function createLogo(ctx) {
var x = - 105;
var y = 0;
ctx.beginPath();
ctx.moveTo(x + 135, y + 15); //50
ctx.lineTo(x + 135, y + 80);
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.strokeStyle = 'orange';
ctx.moveTo(x + 105, y + 20);
ctx.bezierCurveTo(x + 135, y + 5, x + 135, y + 5, x + 165, y + 20);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(x + 165, y + 20, 15, 0.5 * Math.PI, 1.5 * Math.PI, true);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(x + 165, y + 60, 20, 0.5 * Math.PI, 1.5 * Math.PI, true);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(x + 165, y + 20, 10, 0.5 * Math.PI, 1.5 * Math.PI, true);
ctx.fillStyle = "#7CFC00";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(x + 165, y + 60, 15, 0.5 * Math.PI, 1.5 * Math.PI, true);
ctx.fillStyle = "#458B00";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(x + 165, y + 5);
ctx.lineTo(x + 165, y + 80);
ctx.lineWidth = 3;
ctx.stroke();
ctx.closePath();
ctx.fillStyle = "rgba(34,45,23,0.4)";
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);

}

// Main animation loop
function mainLoop1(time){
ctx.clearRect(0,0,w,h); // clear da screen

x += dx + w;  // Always keep in positive coordinates.
y += dy + h;
x %= w;  // use modulo to move from one side of screen to other
y %= h;

// check for extra draws
if(x > w - logo.width){  // does sthe x wrap around?
    ctx.drawImage(logo, x - w, y); // yes draw
    if(y > h - logo.height){  // does y wrap around 
        ctx.drawImage(logo, x - w, y - h); // then this is wraped from bottom right
                                      // to top left
    }
}
if(y > h - logo.height){  // check for bottom top wrap around.
    ctx.drawImage(logo, x, y - h);
}
ctx.drawImage(logo, x, y);  // draw normal

// is top left of logo inside home box?
if(x > homeX && x < homeX + homeSize && y > homeY && y < homeY + homeSize){
     return; // animation done so stop here.
}
ctx.filStyle = "black";
ctx.lineWidth = 1;
ctx.strokeRect(homeX, homeY, homeSize, homeSize);

requestAnimationFrame(mainLoop1);


}    
// create canvas and add to DOM
var canvas = createImage(512,196);
canvas.style.border = "1px black solid";
var ctx = canvas.ctx;
document.body.appendChild(canvas);

// Create image to hold rendered logo as the image will need to be drawn sometime 4 times
// and this will help improve render performance.
const logo = createImage(82,82)
createLogo(logo.ctx);

// x,y position
// dx,dy x and y speed
// w,h = canvas w and height
var x,y,dx,dy,w,h, homeX, homeY, homeSize;
x = 200;
y = 0;
dx = -2;
dy = 1.5;
w = canvas.width;
h = canvas.height;
homeX = 100;
homeY = 30;
homeSize = 10;

// start the animation
requestAnimationFrame(mainLoop1);

＆＃13;

＆＃13;

＆＃13;