<!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. Jexus 服务器部署导航

    说明:本索引只是方便本人查找,不涉及版权问题,所有博客,还是到元博客地址访问. <script async src="//pagead2.googlesyndication.com/p ...

  2. Linux学习日记-MVC的部署(三)

    一.Mvc与wcf 相对WCF的部署MVC还是有点麻烦,我们要考虑哪些dll是不需要的,哪些是要拷贝到本地的. 而WCF因为有些配置文件不支持,我们只需要在配置wcf时不使用配置文件而直接使用代码就行 ...

  3. 关于bug分析与异常处理的一些思考

    前言:工作三年了,工作内容主要是嵌入式软件开发和维护,用的语言是C,毕业后先在一家工业自动化控制公司工作两年半,目前在一家医疗仪器公司担任嵌入式软件开发工作.软件开发中,难免不产生bug:产品交付客户 ...

  4. ABP框架 - 时间

    文档目录 本节内容: 简介 时钟 客户端 时区 客户端 绑定器与转换器 简介 虽然有些应用目标市场只是在一个时区,有些应用目标市场是许多不同时区,为满足这种需求并集中化日期操作,ABP为日期操作提供公 ...

  5. spring各jar包作用(转载)

     除了spring.jar文件,Spring还包括有其它13个独立的jar包,各自包含着对应的Spring组件,用户可以根据自己的需要来选择组合自己的jar包,而不必引入整个spring.jar的所有 ...

  6. 总结项目开发中用到的一些css\html技巧

    这篇就是用来总结记录的,会长期更新. 1,半透明背景效果(#ffffff颜色的半透明背景): font-style: italic;">#ffffff; filter:alpha(op ...

  7. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  8. redis成长之路——（六）

    redis配置 为了码农在代码上只关心业务以及代码上的统一性,wenli.drive.redis内部使用配置来完成那些不同的场景,也就是说随便填填配置就能适应不同的场景! 当然配置多了码农也会受不了, ...

  9. 前端开发面试题收集(js部分)

    1.问:js中"1"+2+"3"+4 运算结果是? 答: js中,字符串和数值相加,得到的还是字符串,这里的结果1234也是字符串. 2.问:4+3+2+&qu ...

  10. 【原】SDWebImage源码阅读（一）

    [原]SDWebImage源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 一直没有系统地读过整套源码,就感觉像一直看零碎的知识点,没有系统读过一本专业经典书 ...