javascript中的移动圆
我正试着往上移动，然后再往下走。我完成了三个功能：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>控制台输出：
先上stack.js:8:5，右，右，stack.js:22:5，stack.js:36:5，stack.js:8:5，first，stack.js:22:5，stack.js:22:5，stack.js:8:5，first，stack.js:8:5，stack.js:22:5，stack.js:22:5，stack.js:8:5，first，stack.js:22:5，first，stack.js:8:5，first，stack.js:8:5，first，stack.js:22:5，first，stack.js:8:5，first，右，stack.js:22：5先上stack.js:8:5，右，右，stack.js:22:5，stack.js:8:5，右，stack.js:22:5，stack.js:8:5，stack.js:22:5，first，stack.js:8:5，stack.js:8:5，stack.js:22:5，stack.js:22:5，stack.js:8:5，first，stack.js:22:5，first，stack.js:8:5，stack.js:18:9，first，右，stack.js：22:5最后右stack.js:32:9第一右stack.js:22:5最后右stack.js:32:9
回答 1
Stack Overflow用户
发布于 2017-09-29 18:31:49
您应该只在底部调用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/
https://stackoverflow.com/questions/46494178
复制相似问题
腾讯云开发者
