تحريك الرسوم في Canvas

لرسم تأثيرات الرسوم المتحركة على لوحة HTML5، يجب رسم كل إطار من إطارات الصور، ثم الانتقال بسرعة من إطار إلى آخر لإنشاء تأثير الرسوم المتحركة.

مثال على선ترنت

لرسم رسوم متحركة على لوحة HTML5، يجب عليك رسم إطارات الرسوم المتحركة وإعادة رسمها بسرعة عالية لجعل العديد من الصور تبدو كأنها رسوم متحركة.
لتحقيق أداء ممتاز للرسوم المتحركة، يتم استخدام دالة requestAnimationFrame باستخدام دالة التدفق في واجهة window. يمكنك دعوة هذه الدالة ومرور دالة أخرى كمعامل لتتمكن من دعوة هذه الدالة عند استعداد المتصفح لرسم الإطار التالي للرسوم المتحركة.
عندما يبدأ المتصفح في إعداد رسم الإطار التالي، يمكن للمتصفح إرسال إشارة إلى التطبيق لإطلاق تسريع الجهاز المعياري للرسومات، مما يسمح للمتصفح بالتنسيق مع الأنشطة المعدة للرسم الأخرى في المتصفح. يجب أن يكون تجربة الرسم أفضل بكثير من استخدام دالة setTimeout() في جافا سكريبت لتحديد وقت رسم إطارات الرسوم.
这是一个代码示例:

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()应调用一次函数以启动动画。如果没有，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>