Tengo este programa donde puedo agregar luces a mi escena (almacenadas en una matriz de lights ). Cuando inicio el programa por primera vez, quiero que todo esté en negro ya que comienzo con mi matriz vacía. Pero cuando hay luz, quiero cambiar el fondo a una imagen, y cuando no hay luz, quiero que todo vuelva a ser negro. Estoy tratando de llamar a esto en mi función de renderizado:
if(lights.length == 0) { canvas.style.background = "#000000 none"; } else { canvas.style.background = "transparent url('nebula.png')"; }Pero no está funcionando como pretendía. ¿Alguien sabe cómo lograr esto?
no use propiedades de fondo en el lienzo.
Use context.fillRect() para establecer el color de fondo
Use context.fillImage() para establecer la imagen de fondo
Referencia:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect <= fillRect()
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage <= imagen de relleno()
Editar:
Ejemplo:
const cvs = document.getElementById(' /* your canvas */ ') const context = cvs.getContext('2d') // context is the CanvasRenderingContext2D // use the two commands above to make background.