JS Canvas定时器模拟动态加载动画


Posted in Javascript onSeptember 17, 2016

本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
JavaScript职责链模式概述
Sep 17 #Javascript
JavaScript类的写法
Sep 17 #Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 #Javascript
JavaScript每天必学之数组和对象部分
Sep 17 #Javascript
JavaScript每天必学之基础知识
Sep 17 #Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 #Javascript
You might like
PHP常用函数小技巧
2008/09/11 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
js简单时间比较的方法
2016/08/02 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
小学校园之星事迹材料
2014/05/16 职场文书
婚宴新郎致辞
2015/07/28 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
什么是Python装饰器?如何定义和使用?
2022/04/11 Python