Question

正方形仍然被绘制得很难，它们会从绘制的数组中删除。从阵列中删除它们时不应删除它们。数组是否在go函数内没有更新？

使用Javascript：

var canvas;
var ctx;


$(document).ready(function(){

    $("#thebutton").on('click',function(){
        thearray.pop();
    })
    canvas = $('#canvas').get(0);
    ctx =canvas.getContext("2d");
})

class Square{
    constructor(p1,p2,p3,p4){
        this.p1=p1;
        this.p2=p2;
        this.p3=p3;
        this.p4=p4;
    }
    start(){
        var that = this;
        setTimeout(function(){
            that.go();
            that.start();
            console.log("timeout running");

        },1000);
    }
    go(){

       for(let i = 0; i<thearray.length;i++){
           console.log("loop running:"+i);
            if(true){
                ctx.clearRect(0,0,500,500);
                console.log("clearing rect");
            }
            ctx.rect(thearray[i].p1, thearray[i].p2, thearray[i].p3, thearray[i].p4);
            ctx.stroke();
      }
    }
}

var thearray=[];
var thesquare1 = new Square(20,20,150,100);
var thesquare2 = new Square(100,100,200,200);
var thesquare3 = new Square(200,200,300,300);
thearray.push(thesquare1);
thearray.push(thesquare2);
thearray.push(thesquare3);

thesquare1.start();

HTML：

<canvas id="canvas" height="500" width="500"></canvas>
<button type="button" name="button" id="thebutton">Pop Array</button>

Answer 1

花了将近一个小时来调试代码！这导致发现如果使用fillRect()而不是rect()，代码效果很好...... 然后终于找到了.. （我之前也不知道＆gt;＆lt;）看看这个：link

简而言之，只需在beginPath()之后调用clearRect()即可开始新路径，而不是使用旧路径堆栈！

go(){

   ctx.clearRect(0,0,500,500);
   ctx.beginPath(); //This line saved the day :)))
   console.log("clearing rect");

   for(let i = 0; i<thearray.length;i++) {
       console.log("loop running:"+i);
        ctx.rect(thearray[i].p1, thearray[i].p2, thearray[i].p3, thearray[i].p4);
        ctx.stroke();
    }
}

使用此代码可以按预期使用rect()：）

注意：你还必须在for循环之外移动clearRect()调用，否则它会在循环的每次迭代后清除画布，导致仅显示第3个矩形画布。此外，if(true){}根本不是必需的。

更新：同时结帐this个帖子以获取beginPath()的其他替代方案以处理此类情况

画布清除不起作用;数组项不会被删除

1 个答案: