Qui viene la risposta, questa pioggia la neve viene creata usando pura HTML5 Canvas, la tecnica utilizzata per realizzare questa animazione viene chiamato "Double Buffer Animazione". Innanzitutto, è utile sapere qual è la tecnica di animazione Double Buffer.
Double Buffer Technique: tecnica avanzata per rendere l'animazione chiara e con meno sfarfallio. In questa tecnica viene utilizzato 2 Canvas, uno viene visualizzato sulla pagina Web per mostrare il risultato e il secondo viene utilizzato per creare schermate di animazione nel processo di backup.
Come questo aiuterà a pieno, supponiamo di dover creare un'animazione con un numero molto alto di mosse, come nel nostro esempio di Caduta di neve, ci sono un numero di scaglie che si muovono con la propria velocità, quindi tienili in movimento, abbiamo per cambiare la posizione di ogni fiocco e aggiornarlo sulla tela, questo è un processo abbastanza pesante da affrontare.
Così ora invece di aggiornare ogni Flake direttamente sul nostro canvas di pagina, creeremo un buffer Canvas, in cui tutte queste modifiche avvengono e catturiamo un'immagine da una tela di Buffer dopo 30ms e la mostriamo sulla nostra tela reale.
In questo modo la nostra animazione sarà chiara e senza sfarfallio. Quindi qui è un esempio vivo di esso.
http://aspspider.info/erishaan8/html5rain/
Ecco il codice di esso:
<!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>
Anche se trovate questo aiuto pieno, accetta come risposta e lo compongono. o_O
Cheers !!!
fonte
2012-05-30 06:10:31
Come dovrebbe essere questa "pioggia"? Solo strisce blu? (Non acqua rifrattiva, vero?) – Phrogz
sì, esattamente! semplici strisce blu –