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 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
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
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
ES6 十大特性简介
2020/12/09 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Django框架 querySet功能解析
2019/09/04 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
劳资专员岗位职责
2013/12/27 职场文书
代理人委托书
2014/08/01 职场文书
励志演讲稿800字
2014/08/21 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
docker 制作mysql镜像并自动安装
2022/05/20 Servers