Javascript基础动画

我是一个完全的初学者，只是一般的编码。这也是我第一次尝试用js做一些事情；我想给一堆正方形设置动画，使其朝着页面上的某个点移动。我在谷歌上搜索了很多东西，我写了这个，但它不起作用；有人能告诉我为什么这不起作用吗

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var enemies =[];
for (var i = 0; i < 10; i++){
  var randomX = Math.abs(Math.random());
  var randomY = Math.abs(Math.random());
  if (randomX > 100 && randomX < 1200){
    if (randomX%2 == 0){
      randomX = 140;
    } else {
      randomX = 1281;
    }
  }
  if (randomY > 100 && randomY < 75){
    if (randomY%2 == 0){
      randomY = 15;
    } else{
      randomY = 560;
    }
  }
  var enemy = new Enemy(randomX,randomY,0,0);
  enemies.push(enemy);
}

var Enemy = function(x,y,velx,vely){
  this.x = x;
  this.y = y;
  this.velx = 0;
  this.vely = 0;
}

Enemy.prototype.update = function (){
  var tx = 650 - this.x;
  var ty = 250 - this.y;
  var dist = Math.sqrt(tx*tx + ty*ty);
  this.velx = (tx/dist);
  this.vely = (ty/dist);

  if (dist > 0){
    this.x += this.velx;
    this.y += this.vely;
  }
};

Enemy.prototype.render = function(){

  context.fillStyle = #000000;
  context.rect(this.x,this.y,25,25);
  context.fill();
};

function render(){
  context.clearRect(0,0,canvas.width,canvas.height);
  for (var i = 0; i < enemies.length; i++){
    var one = enemies[i];
    context.clearRect(one.x,one.y,25,25);
    one.update();
    one.render();
  }
  requestAnimationFrame(render);
}
render();

var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var=[]；
对于（变量i=0；i<10；i++）{
var randomX=Math.abs（Math.random（））；
var randomY=Math.abs（Math.random（））；
如果（randomX>100&&randomX<1200）{
如果（随机数x%2==0）{
randomX=140；
}否则{
randomX=1281；
}
}
如果（随机性>100&&randomY<75）{
如果（随机%2==0）{
随机性=15；
}否则{
随机性=560；
}
}
var敌人=新敌人（随机X，随机Y，0,0）；
敌人。推（敌人）；
}
var=功能（x、y、velx、VEL）{
这个.x=x；
这个。y=y；
这个.velx=0；
该值为0；
}
defey.prototype.update=函数（）{
var tx=650-此.x；
var ty=250-此.y；
var dist=数学sqrt（tx*tx+ty*ty）；
this.velx=（tx/dist）；
this.vely=（ty/dist）；
如果（距离>0）{
this.x+=this.velx；
this.y+=this.y；
}
};
defey.prototype.render=函数（）{
context.fillStyle=#000000；
rect（this.x，this.y，25,25）；
context.fill（）；
};
函数render（）{
clearRect（0,0，canvas.width，canvas.height）；
对于（变量i=0；i<0.length；i++）{
var one=敌人[i]；
clearRect（1.x，1.y，25,25）；
更新（）；
一、render（）；
}
请求动画帧（渲染）；
}
render（）；

使用此

var敌方=函数…

语法，需要在任何

新敌方（…）

构造函数调用之前放置

敌方

类声明。颜色代码必须用括号括起来

返回一个从0（包含）到1（独占）的数字，因此您的矩形几乎是堆叠在彼此的顶部

您没有关闭敌方.prototype.render中的路径，这就是为什么它没有被清除。（这里有类似的问题：）

（如果清除整个画布，则不需要单独清除每个矩形，因此可以删除渲染函数中的

context.clearRect（one.x，one.y，25，25）；

行。）

---

编辑：

context.fillStyle='#000000'-在这里添加引号，然后重试……谢谢，我完全错过了！但它仍然不起作用：（你实际看到的是什么样的结果？你能更具体地说明什么是有效的还是无效的吗？在我根据用户的建议更改代码后，我现在看到一个带有后像的黑色方块…所以我想我是在错误地清理画布。不过，我试图做的是，在移动到A的边缘附近随机放置10个方块你知道为什么这只适用于一个广场吗/