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中继承的三种方式
Oct 16 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php数据序列化测试实例详解
2017/08/12 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Windows下python2.7.8安装图文教程
2016/05/26 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python实现泊松图像融合
2018/07/26 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python logging设置和logger解析
2019/08/28 Python
python实现串口通信的示例代码
2020/02/10 Python
python能开发游戏吗
2020/06/11 Python
Django框架请求生命周期实现原理
2020/11/13 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
竞争上岗演讲稿
2014/01/05 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
伏羲庙导游词
2015/02/09 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python