Estoy creando un fondo parallax en canvas con JavaScript con movimiento en x, que contiene varias imágenes de 1920x1080 el cual tiene movimiento de izquierda a derecha y en reversa
Tengo el siguiente código JavaScript:
layer.js
export class Layer {
constructor({ layer_path, layer_max, layer_height, layer_reverse, layer_speed }) {
this.layers = []
for (let i = 0; i < layer_max; i++) {
let layer_image_count = i <= 9 ? `0${i}` : `${i}`
let layer_speed_modifier = i < 9 ? `0.0${i + 1}` : `0.${i + 1}`
let layer_image = new Image()
layer_image.src = `${layer_path}/layer_${layer_image_count}.png`
let layer_y = 0
let layer_x = 0
let layer_width = layer_image.width
layer_speed_modifier = layer_reverse ? `-${layer_speed_modifier}` : layer_speed_modifier
let layer_frame_init = 0
this.layers.push({
layer_image,
layer_x,
layer_y,
layer_width,
layer_height,
layer_reverse,
layer_speed_modifier,
layer_speed,
layer_frame_init
})
}
}
update() {
for (let layer of this.layers) {
layer.speed = layer.layer_speed * layer.layer_speed_modifier
layer.layer_x = (layer.layer_frame_init * layer.speed) % layer.layer_width
layer.layer_frame_init--
}
}
draw({ ctx }) {
for (let layer of this.layers) {
ctx.drawImage(layer.layer_image, layer.layer_x, layer.layer_y, layer.layer_width, layer.layer_height)
ctx.drawImage(layer.layer_image, layer.layer_reverse ? layer.layer_x - layer.layer_width : layer.layer_x + layer.layer_width, layer.layer_y, layer.layer_width, layer.layer_height)
}
}
}
main.js
const layer_path = "/assets/img/layer"
const layer_max = 12
const layer_height = canvas_height
const layer_reverse = true
const layer_speed = 50
const layer_1 = new Layer({ layer_path, layer_max, layer_height, layer_reverse, layer_speed })
const animate = async () => {
ctx.clearRect(0, 0, canvas_width, canvas_height)
layer_1.update()
layer_1.draw({ ctx })
requestAnimationFrame(animate)
}
await animate()
El error es que cuando en layer_reverse coloco true, se muestra una línea vertical en la animación, la cual se mueve lentamente de izquierda a derecha hasta que desaparece y no se muestra más y cuando coloco false todo funciona bien
Espero puedan ayudarme Bendiciones.