HTML5 Canvas clearRect不能与beginPath和closePath一起使用

Question

Im使用HTML5在画布上绘制。我有一个点的数组，我通过循环来改变每个绘制周期的x和y坐标。我现在所拥有的是点的移动，但没有清除旧的，所以只有线条移动而不是点。我查了一下其他答案，说我需要使用clearRect的beginPath，但这不起作用。 clearRect的位置有什么问题吗？有人可以帮我画这些东西。

draw: function() { 
     var ctx = this.context; 
     if(this.isReady){ 
      var PI2 = Math.PI * 2; 
      for (var i = 0; i < this.points.length; i++) { 
       var point = this.points[i]; 
        var ic = this.calculateGravity(point.x, point.y); 
       ctx.clearRect(0, 0, this.cw, this.ch); 
       ctx.beginPath(); 
       ctx.arc(point.x - ic.nX, point.y - ic.nY, point.radius, 0, PI2); 
       ctx.fillStyle= point.color; 
       ctx.strokeStyle= point.color; 
       ctx.closePath(); 
       ctx.fill(); 
       ctx.stroke(); 
       this.points[i].x = point.x - ic.nX; 
       this.points[i].y = point.y - ic.nY; 
      } 
     } 
    }, 

Answer 1

你应该使你的观点之前，只是清除你的画布：

if(this.isReady){ 
    ctx.clearRect(0, 0, this.cw, this.ch); 
    var PI2 = Math.PI * 2; 
    for (var i = 0; i < this.points.length; i++) { 
    /* ... */ 
}