Canvas——使用定時器模擬動態加載動畫！

本文轉載自查看原文 2016-09-17 13:08 1954 js/ html

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 定時器2的使用 netty實現動態定時器 springboot動態配置定時器定時器中斷模擬PWM，並使用PWM控制LED亮度 js--定時器的學習和對動畫的封裝（定時器） spring task定時器的配置使用 Java 定時器 Timer 的使用. 使用SpringMVC寫一個定時器 C的定時器timeSetEvent使用 Spring Boot中定時器的使用