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