محاكاة تحميل ديناميكي باستخدام定时ر في JS Canvas

هذا المثال يشارككم كيفية تحميل ديناميكيات الرسوم البيانية باستخدام定时ر كنافس كنافس، يمكنكم الرجوع إليه، وتفاصيله كالتالي

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="500">على جهازك لا يدعم تقنية canvas</canvas>
  <script>
    var c=document.getElementById('canvas');
    var ctx= c.getContext('2d');
    ctx.translate(c.width/2, c.height/2);
    //أولاً، رسم 8 دوائر متحركة مسبقًا
    function create() {
      for (var i = 1; i < 9; i++) {
        if (i==1) {
          ctx.beginPath();
          ctx.arc(0, -30, 5, 0, 2 * Math.PI);
          ctx.fillStyle='#f0f';
          ctx.fill();
        }else{
          ctx.beginPath();
          ctx.arc(0, -30, 5, 0, 2 * Math.PI);
          ctx.strokeStyle ='#000';
          ctx.stroke();
        }
        ctx.rotate(Math.PI * 45 / 180);
      }
    }
    //定时转动
    setInterval(function(){
      ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
      create();
      ctx.rotate(Math.PI*45/180);
    },300);
    //定时关闭加载
    setTimeout(function(){
     c.style.display='none';
   12200);
    //
  </script>
</body>
</html>

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أن تدعموا دائمًا تعليمات الصراخ.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات للمالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت الذين قدموها بأنفسهم، ويتمتع هذا الموقع بملكية غيرها، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدم الدليل الداعم، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المشبوه فوراً.

تعليمية الأساس

سيذهب لكذاكرة التفضيل