<!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. 从史上八大MySQL事故中学到的经验

    本文列举了史上八大MySQL宕机事件原因.影响以及人们从中学到的经验,文中用地震级数来类比宕机事件的严重性和后果,排在最严重层级前两位的是由于亚马逊AWS宕机故障(相当于地震十级和九级). 一.Per ...

  2. 续 CentOS7(mini) 运行MVC5 + Mariadb

    上一篇,介绍了在CentOS7上使用mono官方二进制安装包快速安装mono环境 并且成功运行了一个Owin自宿主应用(Booker) 由于Owin自宿主应用不需要System.Web的支持,所以可以 ...

  3. 一步步开发自己的博客 .NET版（1、基本显示）

    前言 我们每个猿都有一个搭建自己独立博客的梦,我也不例外.以前想 现在想 以后也想.之所以一直迟迟没有着手,是因为难以跨出第一步.每次心里想着,等我以后技术好了再说,然后就没有然后了.以前用过word ...

  4. Microsoft Azure Web Sites应用与实践【4】—— Microsoft Azure网站的“后门”

    Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...

  5. 基于Adobe Flash平台的3D页游技术剖析

    写在前面 从黑暗之光,佛本是道,大战神的有插件3D页游.再到如今的魔龙之戒. 足以证明,3D无插件正在引领页游技术的潮流. 目前,要做到3D引擎,有以下几个选择. 说到这里,我们发现.这些都不重要. ...

  6. 小丁带你走进git世界五-远程仓库

    一.文件,指令讲解 首先讲一下远程仓库和本地仓库在文件上面的区别,首先我们来看下对比图(当然这里说的区别是在于.git文件下面的文件内容,至于里面内容我们不会关注)這裡我们进行了相同的操作就是本地仓库 ...

  7. Java基础知识（贰）

    一.面向对象 Java中的面向对象与C#的面向对象,本质都是一样.所以对于学过C#的同学理解Java中面向对象的概念就比较轻松. 对象 定义: 万物皆对象,客观存在的事物都称为对象. 1.面向对象 类 ...

  8. JMeter压力测试

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于测试静态和动态资源例如静态文件. ...

  9. JavaScript的闭包

    1. 什么是闭包 通俗地讲,JavaScript 中每个的函数都是一个闭包,但通常意义上嵌套的函数更能够体现出闭包的特性,请看下面这个例子: var generateClosure = functio ...

  10. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...