Canvas——使用定时器模拟动态加载动画！

时间：2023-02-16 14:58:09
<!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&period;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. HDU 5976 数学，逆元

    1.HDU 5976 Detachment 2.题意:给一个正整数x,把x拆分成多个正整数的和,这些数不能有重复,要使这些数的积尽可能的大,输出积. 3.总结:首先我们要把数拆得尽可能小,这样积才会更 ...

  2. Java设计模式——组合模式

    JAVA 设计模式 组合模式 用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模 ...

  3. 都是以父元素的width为参照物的

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  4. MATLAB符号运算 分类： 图像处理 2015-07-31 22&colon;53 3人阅读 评论&lpar;0&rpar; 收藏

    1.符号运算 使用MATLAB可以进行多项式乘除运算,也可以进行因式分解. 例1. 多项式乘除运算(x+3)3 >> syms x; >> expand((x+3)^3) an ...

  5. Java &lbrack;Leetcode 223&rsqb;Rectangle Area

    题目描述: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is def ...

  6. Go语言开发环境安装

    Go是Google开发的一种编译型,並發型,并具有垃圾回收功能的编程语言. 去http://golang.org/doc/install#download 下载相应的版本. 1.安装go语言:2.将g ...

  7. pycurl，Python cURL library

    pycurl — A Python interface to the cURL library Pycurl包是一个libcurl的Python接口.pycurl已经成功的在Python2.2到Pyt ...

  8. luoguP1886 滑动窗口 &lbrack;单调队列&rsqb;

    题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...

  9. 关于MVC Ajax&period;BeginForm&lpar;&rpar;异步上传文件的问题

    问题描述: 如果用juqery原生的异步上传方式,只要如下方法即可 $.ajax({ type: "GET", url: "test.json", data: ...

  10. Kali Linux Web后门工具、Windows操作系统痕迹清除方法

    Kali Linux Web后门工具 Kali的web后门工具一共有四款,今天只介绍WebaCoo 首先介绍第一个WeBaCoo(Web Backdoor Cookie) WeBaCoo是一款隐蔽的脚 ...

相关文章