HTML5 Canvas para toDataURL()

Para criar animações no canvas5 Para criar efeitos de animação de imagem no canvas, você precisa desenhar cada frame da imagem e, em seguida, passar rapidamente de um frame para o próximo, formando um efeito de animação.

Exemplo online

Para desenhar animações em HTML5Para desenhar animações no canvas, você precisa desenhar e redesenhar os frames da animação. Você precisa fazer isso muito rapidamente para que muitos frames pareçam uma animação.
Para obter o melhor desempenho de animação, o requestAnimationFrame usa uma função de callback no objeto window. Você pode chamar essa função e passar outra função como parâmetro que será chamada quando o navegador estiver pronto para desenhar o próximo frame de animação.
Quando o navegador está pronto para desenhar o próximo frame, ele pode ativar o aceleração de hardware para animações, e coordena a redesenhar os frames com outras atividades de redesenho no navegador. Em comparação com o uso da função setTimeout() do JavaScript para cronometrar a desenho dos frames de animação, a experiência geral deve ser muito melhor.
Este é um exemplo de código:

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

A função animate() obtém uma referência para a função requestAnimationFrame(). Observe que esse função pode ter diferentes nomes em diferentes navegadores. Defina a variável reqAnimFrame como todos esses possíveis funções que não são null.
Em segundo lugar, reqAnimFrame() chama a função, passando a função animate() como parâmetro. Portanto, quando o navegador estiver pronto para desenhar o próximo frame, a função animate() será chamada.
Em terceiro lugar, a função animate() chama a função draw(). draw() não foi mostrada no exemplo anterior. O que ela deve fazer é, primeiramente limpar o canvas (ou a quantidade de canvas que precisa ser limpo), e depois desenhar o próximo frame da animação.
Em exemplo anterior, não foi mostrado que animate() deve chamar uma função para iniciar a animação. Se não, requestAnimationFrame() nunca chamará essa função e a animação nunca começará.
Este é um exemplo de animação de movimento de um único retângulo no canvas:

O código para implementação de animação canvas如下:

<canvas id="ex1" width="500" height="170" style="border:　1px sólido #cccccc;">
HTML5　Canvas não é suportado
</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　-　(concluir　-　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>