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

Canvas——使用定时器模拟动态加载动画！的更多相关文章

  1. canvas扇形进度圈动态加载

    效果图如下:动态加载的 实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. 运行时用AnimatorOverrideController动态加载动画片段

    https://blog.csdn.net/tlrainty/article/details/54602786 项目中经常会遇到这种情况:很多模型动画的AnimatorController是一模一样的 ...

  3. Ajaxload动态加载动画生成工具的实现（ajaxload的本地移植）

    前言 前段时间看到一个国外的网站,在线生成ajax loading动画.觉得很实用,于是动起了移植到自己网站的念头(一直以来的习惯,看到好的工具总想着移植到本地好好研究).根据以往移植的经验最终把 这 ...

  4. jQuery动态加载动画spin.js

    在线演示 本地下载

  5. WPF当属性值改变时利用PropertyChanged事件来加载动画

    在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...

  6. Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现

    Swift中用类名字符串创建类(用到了命名空间) OC中可以直接通过类名的字符串转换成对应的类来操作,但是Swift中必须用到命名空间,也就是说Swift中通过字符串获取类的方式为NSClassFro ...

  7. svg的animate动画动态加载删除遇到删除animate后再次加载的animate动画没有效果问题

    svg上有多个圆圈,当选中特定圆圈后给其加上animate动画效果,并把其他圆圈的animate效果去除. 第一次选择一个点实现动画效果完全达到效果,因为是第一次所以不需要把其他圆圈的animate子 ...

  8. Android 动态加载 （二） 态加载机制 案例二

    探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法 重要说明 在实践的过程中大家都会发现资源引用的问题,这里重点声明两点: 1. 资源文件是不能直接inflate的,如果简单的话直接在程序 ...

  9. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

随机推荐

  1. 【腾讯Bugly干货分享】Android Patch 方案与持续交付

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a31921ac3a1fb613dd40f3 Android 不仅系统版本众多 ...

  2. [异常解决] JLINK 与STM32的SWD连接接线方式

    如果我们的板子上只留了4个接口:V3.3,SWDIO,SWDCLK,GND.那么和JTAG的连接关系参见下图: 注意缺口方向.然后GND可以接左边任何一个pin(除了最底下这个PIN). FROM: ...

  3. ASP.NET Web API Model-ParameterBinding

    ASP.NET Web API Model-ParameterBinding 前言 通过上个篇幅的学习了解Model绑定的基础知识,然而在ASP.NET Web API中Model绑定功能模块并不是被 ...

  4. 自学MVC看这里——全网最全ASP.NET MVC 教程汇总

    MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口.本文从 ...

  5. ABP源码分析四十四：ZERO的配置

    ABP Zero模块中需要配置的地方主要集中在三块:配置静态的role,配置外部认证源,以及配置本地化语言和资源. UserManagementConfig/IUserManagementConfig ...

  6. Javascript之变量作用域

    分析: 无论是强类型语言c#.c++.java等语言,还是弱类型语言如Javascript,所有变量可以抽象为两种类型,即局部变量和全局变量. 全局变量:整个作用域可见. 局部变量:局部可见,退出作用 ...

  7. The type java.lang.CharSequence cannot be resolved. It is indirectly referenced from required .class files.

    参照 http://stackoverflow.com/questions/24301986/the-type-java-lang-charsequence-cannot-be-resolved-in ...

  8. postman使用

    1.postman的下载:google首页左上角应用,点击后,如果没有下载postman,就在google商店搜索,点击右边按钮 2.下载后重新打开google首页,点击应用,可以看到已经下载过了,点 ...

  9. java终端获取输入

    上一篇博客已经介绍了System.in这个输入流这次谈谈java如何获取终端(控制台)的输入 (1)BufferedReader JDK 1.4 及以下的版本中要想从控制台中输入数据只有一种办法,即使 ...

  10. ★Kali信息收集~★6.Dmitry:汇总收集

    概述: DMitry(Deepmagic Information Gathering Tool)是一个一体化的信息收集工具.它可以用来收集以下信息: 1. 端口扫描 2. whois主机IP和域名信息 ...