Canvas Clear не работает; Элементы массива не удаляются

1

Квадраты все еще тянутся даже жестко, они удаляются из массива, который нарисован. Не следует удалять их, когда они удаляются из массива. Не обновляется ли массив внутри функции 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>
Теги:

1 ответ

0
Лучший ответ

Отработал почти час после отладки вашего кода! Это привело к выводу, что если fillRect() используется вместо rect() код работает хорошо... и затем, наконец, нашел это.. (я тоже не знал этого раньше> <) Посмотрите на это: 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() по назначению :)

Примечание: также вы должны переместить этот clearRect() за пределы цикла for, иначе он очистит полотно после каждой отдельной итерации цикла, в результате которой будет отображаться только третий прямоугольник на холсте. Кроме того, if(true){} вовсе не требуется.

Обновление. Также проверьте этот поток для некоторых других альтернатив beginPath() для обработки такого сценария

  • 0
    Это решение. Это заняло у меня много времени! Большое спасибо!!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню