Aquí viene su respuesta, esta lluvia la nieve se ha creado usando HTML 5 lienzo pura, la técnica utilizada para lograr esta animación se llama "Buffer Animación doble". En primer lugar, es bueno saber qué es la técnica de animación Double Buffer.
Técnica de doble amortiguación: esta es una técnica avanzada para hacer que la animación sea clara y con menos parpadeos. En esta técnica, se utiliza 2 lienzos, uno se muestra en la página web para mostrar el resultado y el segundo se utiliza para crear pantallas de animación en el proceso respaldado.
Cómo esto ayudará, supongamos que tenemos que crear una animación con un número muy alto de movimiento, como en nuestro ejemplo de caída de nieve, hay un número de escamas moviéndose con su propia velocidad, así que manténlos en movimiento, tenemos para cambiar la posición de cada hojuela y actualizarla en el lienzo, este es un proceso bastante difícil de manejar.
Así que ahora en lugar de actualizar cada Flake directamente en nuestro lienzo, crearemos un lienzo de buffer, donde se realizarán todos estos cambios y capturaremos un lienzo Picture from Buffer después de 30ms y lo mostraremos en nuestro lienzo real.
De esta manera nuestra animación será clara y sin parpadeos. Así que aquí hay un ejemplo en vivo de eso.
http://aspspider.info/erishaan8/html5rain/
Este es el código de la misma:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Rain</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200; // Here you may set max flackes to be created
function init() {
//Canvas on Page
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
//Buffer Canvas
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
flakeTimer = setInterval(addFlake, 200);
Draw();
setInterval(animate, 30);
}
function animate() {
Update();
Draw();
}
function addFlake() {
flakeArray[flakeArray.length] = new Flake();
if (flakeArray.length == maxFlakes)
clearInterval(flakeTimer);
}
function blank() {
bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}
function Update() {
for (var i = 0; i < flakeArray.length; i++) {
if (flakeArray[i].y < context.canvas.height) {
flakeArray[i].y += flakeArray[i].speed;
if (flakeArray[i].y > context.canvas.height)
flakeArray[i].y = -5;
flakeArray[i].x += flakeArray[i].drift;
if (flakeArray[i].x > context.canvas.width)
flakeArray[i].x = 0;
}
}
}
function Flake() {
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.random();
this.speed = Math.round(Math.random() * 5) + 1;
this.width = (Math.random() * 3) + 2;
this.height = this.width;
}
function Draw() {
context.save();
blank();
for (var i = 0; i < flakeArray.length; i++) {
bufferCanvasCtx.fillStyle = "white";
bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height);
}
context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
context.restore();
}
</script>
</head>
<body onload="init()">
<canvas id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
</body>
</html>
Además, si usted encuentra esta ayuda completa, acepta como respuesta y lo componen. o_O
¡Salud!
¿Cómo debería ser esta "lluvia"? ¿Solo rayas azules? (No agua de refracción, ¿verdad?) – Phrogz
sí, exactamente! simples rayas azules –