10圖像彈跳的JavaScript。不能使用clearRect

你好，我在這個代碼中有10個圖像在畫布上，並應該開始在畫布上彈跳。問題是我不知道如何在這種情況下使用clearRect。我試過了，我無法讓它工作。當時間流逝時，圖像似乎開始變慢。10圖像彈跳的JavaScript。不能使用clearRect

<html> 
 
<head><title>Pregunta clases</title></head> 
 
<body> 
 
<canvas id="ventana" width="600" height="600" style="border:2px solid #000000;"></canvas> 
 

 
<script> 
 

 
var canvas=document.getElementById("ventana"); 
 
var context=canvas.getContext("2d"); 
 

 

 
var cuadrados=10; 
 
var y = []; 
 

 

 
var x = []; 
 
var Cuadrado1 = new Image(); 
 
Cuadrado1.src = 'cuadrado1.jpg'; 
 

 
for(i=0;i<cuadrados;i++) { 
 
\t x.push(Math.round(Math.random() * 570)); \t 
 
} 
 

 

 
for(i=0;i<cuadrados;i++) { 
 
\t y.push(Math.round(Math.random() * 570)); 
 
} 
 
    
 
var velocidad=5; 
 
var direccion=1; 
 
var contador=0; 
 
var contador2=0; 
 

 

 

 
\t var aeio= setInterval(function ab(){ 
 
\t 
 
\t for(k=0;k<cuadrados;k++) { 
 

 

 
context.drawImage(Cuadrado1, x[k], y[k], 30, 30); 
 

 
if(y[k]>=600){ 
 
\t direccion= -1; 
 
\t 
 
}else if(y[k]<=0){ 
 
    direccion= 1; 
 
    
 
} 
 
y[k] = y[k]+ velocidad*direccion; 
 
} 
 

 

 
}, 1); 
 

 

 

 
//contador 
 
for(j=0;j<cuadrados;j++){ 
 
if(x[j]>300){ 
 
\t contador= contador + 1; 
 
} else if(x[j]<=300){ 
 
\t contador2= contador2 + 1; 
 
} 
 
} 
 
context.clearRect(0, 0, 600, 600); 
 
</script> 
 

 
<div id="posiciones cuadrados"> 
 
<script> 
 
document.write("Hay "+contador+" cuadrados en el lado derecho"); 
 
document.write("<br>Hay "+contador2+" cuadrados en el lado izquierdo"); 
 
document.write("<br>El primer cuadrado se encuentra en "+x[0]+" , "+y[0]); 
 
document.write("<br>El segundo cuadrado se encuentra en "+x[1]+" , "+y[1]); 
 
document.write("<br>El tercer cuadrado se encuentra en "+x[2]+" , "+y[2]); 
 
document.write("<br>El cuarto cuadrado se encuentra en "+x[3]+" , "+y[3]); 
 
document.write("<br>El quinto cuadrado se encuentra en "+x[4]+" , "+y[4]); 
 
document.write("<br>El sexto cuadrado se encuentra en "+x[5]+" , "+y[5]); 
 
document.write("<br>El septimo cuadrado se encuentra en "+x[6]+" , "+y[6]); 
 
document.write("<br>El octavo cuadrado se encuentra en "+x[7]+" , "+y[7]); 
 
document.write("<br>El noveno cuadrado se encuentra en "+x[8]+" , "+y[8]); 
 
document.write("<br>El decimo cuadrado se encuentra en "+x[9]+" , "+y[9]); 
 

 

 

 
</script> 
 
</div> 
 
</body> 
 
</html>

來源

2015-08-28 hoal

確保你的財產包括片段。 –

只是清除每一幀整個畫布。

var aeio = setInterval(function ab() { 
    context.clearRect(0, 0, 600, 600); 

    for (k = 0; k < cuadrados; k++) { 
     context.drawImage(Cuadrado1, x[k], y[k], 30, 30); 
     if (y[k] >= 600) { 
      direccion = -1; 
     } else if (y[k] <= 0) { 
      direccion = 1; 
     } 
     y[k] = y[k] + velocidad * direccion; 
    } 
}, 1);

來源

2015-08-28 23:22:08

10圖像彈跳的JavaScript。不能使用clearRect

回答

相關問題