Question

我试图将圈子向上移动，然后向下移动。我制作了3个函数：up，right和down。我使用它们，但它们是平行的。我希望如果第一个功能结束，那么第二个功能将开始，依此类推这是我的代码：

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
var progress = 0;
function up(){
    console.log('up');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300, 300 - progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(up);
    }else{
        progress = 0;
        console.log('last up')
    }
}
function right(){
    console.log('right');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300 + progress, 200, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(right);
    }else{
        progress = 0;
        console.log('last right')
    }
}
function down(){
    console.log('down');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(400, 200 + progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(right);
    }else{
        progress = 0;
        console.log('last down')
    }
}
window.requestAnimationFrame(up);
window.requestAnimationFrame(right);
window.requestAnimationFrame(down);

---------------------------------

canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}

------------------------------------

<canvas></canvas>

控制台输出：

首先向上堆栈.js：8：5第一个右侧stack.js：22：5首先向下 stack.js：36：5 first up stack.js：8：5 first right stack.js：22：5 first up stack.js：8：5 first right stack.js：22：5 first up stack.js：8：5 第一个权利stack.js：22：5首先up.sts：8：5第一个权利 stack.js：22：5 first up stack.js：8：5 first right stack.js：22：5 first up stack.js：8：5 first right stack.js：22：5 first up stack.js：8：5 第一个权利stack.js：22：5首先up.sts：8：5第一个权利 stack.js：22：5 first up stack.js：8：5 first right stack.js：22：5 first up stack.js：8：5 first right stack.js：22：5 first up stack.js：8：5 last up stack.js：18：9 first right stack.js：22：5 last right stack.js：32：9 first right stack.js：22：5 last right stack.js：32：9

Answer 1

您应该只在底部拨打window.requestAnimationFrame(up);，然后在progress越过100时拨打其他人。像这样：

function up(){
    //...
    if(progress < 100){
        window.requestAnimationFrame(up);
    }else{
       progress = 0;
       console.log('last up');
       window.requestAnimationFrame(right);
    }
}

这将是完整的代码：

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
var progress = 0;
function up(){
    console.log('up');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300, 300 - progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(up);
    }else{
        progress = 0;
        console.log('last up');
        window.requestAnimationFrame(right);
    }
}
function right(){
    console.log('right');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300 + progress, 200, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(right);
    }else{
        progress = 0;
        console.log('last right');
        window.requestAnimationFrame(down);
    }
}
function down(){
    console.log('down');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(400, 200 + progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(down);
    }else{
        progress = 0;
        console.log('last down');
    }
}
window.requestAnimationFrame(up);

canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}

<canvas></canvas>

也可在此处找到：https://jsfiddle.net/kvmt6ru9/

在javascript中移动圈子

1 个答案: