Estoy haciendo un proyecto en el que necesito hacer un lienzo html con imágenes de pajarita lloviendo. Aquí está mi js:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); let img = new Image("images.png") var ok2animate = true; img.onload = function(){ function Drop() { this.x = Math.random() * (canvas.width - 20); this.y = -Math.random() * 20; this.fallRate = Math.random()*.5+.5; } // Drop.prototype.draw = function () { // this.x; // this.y; ctx.drawImage(img, this.x, this.y) return (this); } // Drop.prototype.fall = function () { this.y += this.fallRate; return (this); } function animate() { // request another animation frame if (ok2animate) { requestAnimationFrame(animate); } ctx.fillRect(0,0,canvas.width,canvas.height) //ctx.clearRect(0, 0, canvas.width, canvas.height); // make all drops fall and then redraw them for (var i = 0; i < drops.length; i++) { drops[i].fall().draw(); } } // an array of objects each representing 1 drop var drops = []; // add some test drops for (var i = 0; i < 10; i++) { drops.push(new Drop()); } setInterval(function(){requestAnimationFrame(animate)}, 1000) requestAnimationFrame(animate) } <canvas id="canvas" width=300 height=300></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>¿Cómo hago para que las imágenes llueva a intervalos de 1 segundo? (Incluí el archivo de imagen en la misma carpeta) Intenté usar un archivo de imagen de la web, usando un lienzo más grande, utilizando otras versiones de jquery, pero ninguno funcionó.
Puede crear una nueva imagen con el constructor de Image . Ya lo hiciste, sin embargo, los argumentos que acepta el constructor son el width y el height de la imagen, no la url. Necesita la propiedad src de la imagen para hacer referencia al archivo de imagen.
Y dado que solo usa 1 sola imagen, eso no cambia, solo tiene que crearla y cargarla una vez. Puedes reutilizar la misma imagen tantas veces como quieras.
Ahora, debe iniciar el ciclo después de que se hayan cargado todas las imágenes (que en este caso es una). Escuche el evento onload en la imagen y llame a la función setInterval siempre que se cargue la imagen.
setInterval comenzará la representación aquí, por lo que no es necesario llamar a requestAnimationFrame(animate) en ningún otro lugar.
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // Create the image like this. const image = new Image(100, 100); image.src = "https://www.fillmurray.com/100/100"; function Drop() { this.x = Math.random() * (canvas.width - 20); this.y = -Math.random() * 20; this.fallRate = Math.random() * 10 + 0.5; } Drop.prototype.draw = function() { ctx.drawImage(image, this.x, this.y) return this; } Drop.prototype.fall = function() { this.y += this.fallRate; return this; } const drops = []; for (let i = 0; i < 10; i++) { drops.push(new Drop()); } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height) for (const drop of drops) { drop.fall().draw(); } } image.onload = () => { setInterval(function() { requestAnimationFrame(animate) }, 1000) }; <canvas id="canvas" width=300 height=300></canvas>