HTML5 Canvas zu erstellen

Um Animationen auf dem HTML5 zu zeichnen, müssen Sie jedes Frame der Bilder zeichnen und dann in einer sehr kurzen Zeit von einem Frame zum nächsten Frame übergehen, um den Animationseffekt zu erzeugen.

Online-Beispiel

Um Animationseffekte in HTML5Um Animationen auf dem Canvas zu zeichnen, müssen Sie die Frames der Animation auf dem Canvas zeichnen und neu zeichnen. Dies muss sehr schnell geschehen, um viele Bilder so aussehen zu lassen, als ob sie eine Animation wären.
Um die beste Leistung der Animation zu erzielen, verwendet requestAnimationFrame eine Callback-Funktion im window-Objekt. Sie können diese Funktion aufrufen und eine weitere Funktion als Parameter übergeben, die aufgerufen werden soll, wenn der Browser bereit ist, das nächste Frame der Animation zu zeichnen.
Wenn der Browser bereit ist, das nächste Frame zu zeichnen, kann der Browser Hardwarebeschleunigung für die Animation aktivieren und die Zeichnung der Frames mit anderen Redraw-Aktivitäten im Browser koordinieren. Im Vergleich zur Zeitsteuerung der Animation mit der Funktion setTimeout() in JavaScript sollte das Gesamterlebnis erheblich besser sein.
Dies ist ein Beispielcode:

function animate() {
　　　　reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(beenden　-　start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

Die Funktion animate() erhält zunächst eine Referenz auf die Funktion requestAnimationFrame(). Beachten Sie, dass dieser Name in verschiedenen Browsern unterschiedlich sein kann. Setzen Sie die Variable reqAnimFrame auf alle möglichen nicht-null Funktionen.
Zweitens ruft reqAnimFrame() die Funktion auf und übergibt animate() als Parameter. Daher wird die Funktion animate() aufgerufen, wenn der Browser bereit ist, das nächste Frame zu zeichnen.
Drittens ruft die Funktion animate() die Funktion draw() auf. draw() wird im obigen Beispiel nicht gezeigt. Was es tun sollte, ist, zunächst den Canvas (oder die zu bereinigenden Canvas) zu löschen und dann das nächste Frame der Animation zu zeichnen.
In dem obigen Beispiel wird ein weiteres Thema nicht gezeigt: animate() sollte einmal eine Funktion aufrufen, um die Animation zu starten. Wenn nicht, wird requestAnimationFrame() die Funktion niemals aufrufen und die Animation wird niemals beginnen.
Dies ist ein Beispiel für eine Animation, bei der ein einzelner Rechteck auf dem Canvas bewegt wird:

Das Code für die Canvas-Animation ist wie folgt:

<canvas id="ex1" width="500" height="170" style="border:　1px fest #cccccc;">
HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var x = 0;
var y =　15;
var speed =　5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(beenden　-　start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x　+= speed;
if(x <= 0 || x >=　475{
speed =　-speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, y,　500,　170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y,　25,　25);
}
animate();
</script>