Мне интересно, как я могу изменить свой Javascript, чтобы очистить только падающие спрайты, а не весь холст (как сейчас).
Я надеюсь разместить на холсте несколько других (анимированных) спрайтов, которые не будут отображаться в соответствии со структурой моего function animate.
Есть ли способ, чтобы, если бы на холсте было другое изображение/спрайт, на него не повлиял бы function animate.
Я думаю, что эту строку нужно изменить:
ctx.clearRect(0, 0, canvas.width, canvas.height);
Хотя я понятия не имею, какие параметры мне нужно было бы разместить внутри. Падающие спрайты рисуются с размером 60x60, но когда они падают вниз, я немного застрял с очисткой единственного пути спрайта.
Любая помощь будет оценена по достоинству :)
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 1408;
canvas.height = 640;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
var orangeEnemy = new Image();
orangeEnemy.src = "http://www.catholicsun.org/wp-content/uploads/2016/09/cropped-sun-favicon-512x512-270x270.png";
var yellowEnemy = new Image();
yellowEnemy.src = "http://www.clker.com/cliparts/o/S/R/S/h/9/transparent-red-circle-hi.png";
var srcX;
var srcY;
var enemySpeed = 2.75;
var images = [orangeEnemy, yellowEnemy];
var spawnLineY=-50;
var spawnRate=2500;
var spawnRateOfDescent=1.50;
var lastSpawn=-1;
var objects=[];
var startTime=Date.now();
animate();
function spawnRandomObject() {
var object = {
x: Math.random() * (canvas.width - 15),
y: spawnLineY,
image: images[Math.floor(Math.random() * images.length)]
}
objects.push(object);
}
function animate(){
var time=Date.now();
if(time>(lastSpawn+spawnRate)){
lastSpawn=time;
spawnRandomObject();
}
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// move each object down the canvas
for(var i=0;i<objects.length;i++){
var object=objects[i];
object.y += enemySpeed;
ctx.drawImage(object.image, object.x, object.y, 60, 60);
}
}<html>
<canvas id="canvas" style="border:3px solid"></canvas>
</html>