1.5 KiB
title | localeTitle |
---|---|
Animation | الرسوم المتحركة |
الرسوم المتحركة في قماش
لتحريك الأشياء في canvas
، استخدم window.requestAnimationFrame
لإعداد حلقة رسم.
function draw() { /* code goes here */ window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw);
سيؤدي الرمز أدناه إلى تشغيل وظيفة draw
كل إطار.
canvas
لا يوجد لديه وظائف خاصة تسمح للرسوم المتحركة. عليك فقط أن تستخدم للكتابة في حلقات الرسوم المتحركة. نموذج التصميم المعتاد لحلقات الرسوم المتحركة هو تحديث الحالة ، ثم رسم الحالة. على سبيل المثال ، لرسم مربع يتحرك عبر الشاشة:
`canvas = document.getElementById("canvas"); ctx = canvas.getContext('2d');
var x=0; var y=50; function draw() { // reset canvas ctx.clearRect(0, 0, canvas.width, canvas.height); //update state x+=1;
// render state ctx.beginPath(); ctx.rect(x, y, 50, 50); ctx.fill();
window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw); `
لرؤية هذا المفهوم في العمل ، راجع صفحة " الجسيم سيم ".