<!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. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...

  2. NOT IN 和NOT EXISTS

    今天写了一个简单的NOT IN语句,结果跟预期大相径庭,百度之发现深坑一个,遂录之. 登陆账户表logins code name status a admin N b guest N c member ...

  3. python-time 模块

    1.时间戳是以秒为单位的浮点小数,时间戳以自1970年1月1日午夜到现在经过了的时间来表示 2.时间模块引入方式:import time 3.返回时间戳 time.time() 4.返回时间元组:ti ...

  4. 我的MYSQL学习心得（十六） 优化

    我的MYSQL学习心得(十六) 优化 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  5. Membership三步曲之进阶篇 - 深入剖析Provider Model

    Membership 三步曲之进阶篇 - 深入剖析Provider Model 本文的目标是让每一个人都知道Provider Model 是什么,并且能灵活的在自己的项目中使用它. Membershi ...

  6. 基于Quick-cocos2d-x的资源更新方案 二

    写在前面 又是12点半了,对于一个程序员来说,这是一个黄金时间,精力旺盛,我想,是最适合整理和分享一些思路的时候了. 自从上次写了 基于Quick-cocos2d-x的资源更新方案 同样可见quick ...

  7. 系统中没有邮件客户端设置autoLink=email会挂掉的问题

    TextView的autoLink属性为我们提供了很大的便利性,当文本中有网址,邮箱或电话的时候可以让我们方便地执行打电话发邮件等动作,不过也有一些问题,比如说设置autoLink包含email属性, ...

  8. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

  9. 关于CommonJS规范摘录

    CommonJS规范 1. 概述 为什么要用commonjs 模块化的目的: 减少循环依赖 减少耦合,提高了模块的复用率 有利于多人开发,提高开发的效率. 规避命名的冲突.全局变量的污染.有利于代码的 ...

  10. MySQL触发器-条件触发器语法

    文章为作者原创,未经许可,禁止转载.    -Sun Yat-sen University 冯兴伟 实验4 触发器 )实验目的 掌握数据库触发器的设计和使用方法 )实验内容和要求 定义BEFORE触发 ...