لا أنوي تدريس الرسم على القماش، لقد ألقيت نظرة عليه فقط لأنني اعتقدت أنه كان ممتعًا.
هذا يعني أن الأمر قاسي بعض الشيء، لذا لا تنتقديني. .
تأثيرمعدل الإطارات أقل قليلاً، لكن الأداء الفعلي بالطبع أكثر سلاسة.
تنفيذ HTML
<!DOCTYPE html><head> <meta name=viewport content=width=device-width, user-scalable=no, الأولي-مقياس=1.0, الحد الأقصى للمقياس=1.0, الحد الأدنى للمقياس=1.0> <style> * { الهامش: 0؛ الحشو: 0؛} الجسم {لون الخلفية: أزرق فاتح؛} #canvas {لون الخلفية: أسود؛ العرض: 100 فولت واط؛} </style></head><body> <canvas id=canvas></canvas> <script>/* انظر أدناه*/</script></body>شبيبة
window.onload = function () { Let // Canvas ctx = document.getElementById('canvas').getContext('2d'), // حجم قماش Canvas_width = document.getElementById('canvas').width, Canvas_height = document .getElementById('canvas').height, // لون النص، الخط، لون الخلفية لأيقونة DVD text_color = ['green', 'أزرق'، 'أرجواني'، 'أصفر'، 'أبيض'، 'أصفر'، 'أبيض']، text_font = 'خط مائل غامق 50 بكسل ياهي'، لون الخلفية = ['أحمر'، 'برتقالي'، 'أصفر'، ' أخضر'، 'أزرق'، 'نيلي'، 'بنفسجي']، // حجم مستطيل الخلفية عرض الخلفية = 110، ارتفاع الخلفية = 50، // عند إضافة نص إلى المستطيل، ينحرف الارتفاع قليلاًfix_height = 7، // السرعة، تتحرك كل إعادة رسم 0.5 بكسل speed_x = 0.5، speed_y = 0.5، // الاتجاه المتحرك، في البداية 'rb' الاتجاه السفلي الأيمن = 'rb'، // إحداثيات الأيقونة x وy، في البداية 0 Position_x = 0، Position_y = 0، // عدد التصادمات المستخدمة لحساب عدد ألوان الخلفية والنص = 0 dvd() function dvd() { // مفتاح الاتجاه المتحرك (الاتجاه) { // الحالة اليمنى السفلى 'rb': Position_x += speed_x Position_y += speed_y Break // الحالة اليمنى العلوية 'rt': Position_x += speed_x Position_y -= speed_y Break // الحالة اليسرى السفلية 'lb': Position_x -= speed_x Position_y += speed_y Break // الحالة اليسرى العليا 'lt': Position_x -= speed_x Position_y -= speed_y Break } // امسح اللوحة القماشية ctx.clearRect(0, 0, Canvas_width, Canvas_height) // إعادة رسم ctx.fillRect(position_x,position_y,background_width,background_height) // كشف التصادم // Bottom if (position_y +background_height> = Canvas_height) { الاتجاه = الاتجاه. استبدال ('b'، 't') // عدد الاصطدامات += 1 } // اليمين if (position_x + الخلفية_width >= Canvas_width) { الاتجاه = الاتجاه.replace('r', 'l') العد += 1 } // اليسار if (position_x < 0) { الاتجاه = الاتجاه.replace(' l', 'r') count += 1 } // العلوي إذا (position_y < 0) { الاتجاه = الاتجاه.replace('t', 'b') count += 1 } // Text ctx.font = text_font ctx.fillStyle = text_color[count % 7] ctx.fillText(DVD,position_x,position_y + الخلفية_height -fix_height) // لون الخلفية ctx.fillStyle = border_color[count % 7] // بدء نافذة الرسوم المتحركة. requestAnimationFrame(DVD) }}ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.