如何移动整个队列并进行canvas描绘。

Question

想要完成下面的效果图，目前进度，move：方法达不到想要的自动以速度位移2的速度移动,var enemy = new Enemy(30,50,50,2);enemy.draw();enemy.moove();function Enemy(x,y,size,speed){          this.x = x,          this.y = y,          this.size = size,          this.speed = speed //反弹系数        }        /**         * 原型方法         * @type {draw描绘出10个怪兽，clear清除画布，move移动怪兽队列}         */        Enemy.prototype = {            draw:function(){                 for(let i=0;i<10;i++){                   enemys[i] = new Image();                   enemys[i].src ='./img/enemy.png';                   enemys[i].onload = function(){                      enemy.x += 50;                      context.drawImage(enemys[i], enemy.x, enemy.y, enemy.size, enemy.size);                    };                 }              },              clears:function(){                context.clearRect(30, 0, canvas.width, canvas.height);              },              // move:function(){              //     var length = enemys.length;               //     if(enemy.x+enemy.speed > canvas.width               //     || enemy.x + enemy.speed < 0               //     || enemy.y + enemy.speed > canvas.height              //     || enemy.y + enemy.speed < 0              //     ){speed  *=-1}              //     enemy.x +=enemy.speed;              //     enemy.clears();              //     enemy.draw();              //     // context.drawImage(planeImage, plane.x, plane.y, plane.width, plane.height);                        //     requestAnimationFrame(enemy.move);              // },             move:function(){              enemy.x +=enemy.speed;              enemy.clears();              enemys.splice(0,enemys.length);              enemy.draw();              // requestAnimationFrame(enemy.move());             }        }

Answer 1

在move方法里设置定时器.定时器执行draw方法.
另外在draw方法里一直创建对象不好.
可以先创建个init方法.创建完对象,存在数组中,在draw方法在修改对象属性就可以了

Answer 2

requestanimationframe 里调用位置平移 平移量为 (2 Math.sin(offsetAngle)/60, 2 Math.cos(offsetAngle)/60)