Как удалять и повторять изображения?
Я заставил изображение двигаться справа налево. Но я хочу добавить функцию, которая, когда изображение достигает x: 50, это изображение удаляется и рисовать влево.
Я пытался использовать оператор управления, например «если», но он не работает.
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "img1.png";
var speed = 0;
var xpos = 800;
var CXpos = 0; //changeing xpos
var result = Math.floor(Math.random() * 500) + 1;
function icon(){
ctx.beginPath();
speed -= 1;
CXpos = xpos + speed;
ctx.drawImage(img, CXpos, result, 60, 60);
if (Cxpos == 50){
canvas.width = canvas.width; //I don't know it's correct code?
icon();
}
ctx.closePath();
}
function iconypos(){
var num = Math.floor(Math.random*100)+1
return num;
}
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
icon();
}
setInterval(draw, 10);
@MoshFue «рисовать влево» означает, что изображение удаляется в точке X: 50, затем воссоздается справа и перемещается влево.
Значит, он будет двигаться от x:50 вправо бесконечно, верно?
Нет, изображение, которое достигает x:50, удаляется, и появляется новое изображение. Изображение не движется прямо в точке x : 50.
Ok. Откуда новый образ. Я имею в виду, у него такой же src или он совершенно другой?
src - то же самое.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я вас правильно понял, это то, что вы ищете. Просто «сбросьте» переменную speed до начальной точки (то есть 0).
Нет необходимости снова вызывать icon(), потому что следующий тик в интервале все равно вызовет это.
var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "https://avatars2.githubusercontent.com/u/15933454?s=60&v=4";
var speed = 0;
var xpos = 800;
var CXpos = 0; //changeing xpos
var result = Math.floor(Math.random() * 500) + 1;
function icon(){
ctx.beginPath();
speed -= 1;
CXpos = xpos + speed;
ctx.drawImage(img, CXpos, result, 60, 60);
if (CXpos == 50){
speed = 0; //I don't know it's correct code?
//icon();
}
ctx.closePath();
}
function iconypos(){
var num = Math.floor(Math.random*100)+1
return num;
}
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
icon();
}
setInterval(draw, 10);<canvas id = "Canvas" width = "800" height = "350"></canvas>Конечно, Ваш ответ сказал мне: «Тебе следует больше учиться». В любом случае, большое спасибо
Мы все постоянно учимся :) Рад, что смог помочь. Пожалуйста, принимать, это может помочь другим людям.
to draw leftЧто вы имеете в виду? Кроме того,canvas.width = canvas.width;ничего не сделает (ширина холста останется прежней).