Question

我使用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++) {
    /* ... */
}

HTML5 Canvas clearRect无法使用beginPath和closePath

1 个答案: