Создание анимации на Canvas в HTML5

Чтобы нарисовать анимационный эффект на HTML5 канвасе, вам нужно нарисовать изображение каждого кадра и затем в очень короткий промежуток времени перейти от одного кадра к следующему, чтобы создать эффект анимации.

Онлайн пример

Чтобы нарисовать анимацию на HTML5 канвасе, вам нужно рисовать и перерисовывать кадры анимации на канвасе. Это нужно делать очень быстро, чтобы множество изображений казались анимацией.
Чтобы обеспечить наилучшую производительность анимации, функция requestAnimationFrame использует回调-функции в объекте window. Вы можете вызывать эту функцию и передавать в качестве параметра другую функцию, которая будет вызываться, когда браузер готов к рисованию следующего кадра анимации.
Когда браузер готов к рисованию следующего кадра, он может включить аппаратное ускорение анимации, отправляя сигнал приложению, и координировать рисование кадров с другими активностями перерисовки в браузере. В сравнении с использованием функции setTimeout() в JavaScript для тайминга рисования кадров анимации, общее впечатление должно быть значительно лучше.
Вот пример кода:

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 - (finish - start);
　　},　self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

Функция animate() сначала получает ссылку на функцию requestAnimationFrame(). Обратите внимание, что这个名字 функции может отличаться в зависимости от браузера. Установите переменную reqAnimFrame для всех этих функций, которые не равны null.
Во-вторых, функция reqAnimFrame() вызывает функцию, передавая функцию animate() в качестве параметра. Таким образом, когда браузер готов к рисованию следующего кадра, он вызывает функцию animate().
В-третьих, функция animate() вызывает функцию draw(). Функция draw() не была показана в предыдущем примере. Она должна сначала очистить канвас (или количество канвасов, которые нужно очистить), а затем нарисовать следующее кадр анимации.
В предыдущем примере не было показано, что функция animate() должна быть вызвана один раз, чтобы запустить анимацию. Если этого не сделать, function requestAnimationFrame() никогда не вызовет эту функцию, и анимация永远不会 начнется.
Этот пример анимации показывает, как перемещается единственная прямоугольная форма на канвасе:

Код для анимации canvas представлен ниже:

<canvas id="ex1" width="500" height="170" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</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 - (finish - 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,　0,　500,　170);
context.fillStyle　=　"#ff00ff";
context.fillRect(x,　y,　25,　25);
}
animate();
</script>