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>
复制代码

 

posted @   li_han  阅读(2599)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
点击右上角即可分享
微信分享提示