canvas  html5load1

主要思路update  实现12个点的绘制和旋转效果

  1. var update = function() {
  2. ctx.save();// 把当前绘图状态保存起来
  3. ctx.clearRect(0, 0, 128, 128);// 擦除画布
  4. ctx.translate(64, 64);// 把坐标原点移到画布中央
  5. base = (++base === 13) ? (base - 12) : base;// 使用base来指示最大的圆点所在的位置,对应起点的12个位置,实现旋转动画的效果
  6. var angle = Math.PI / 6;// 画12个点,所以每个点之间的角度是1/6 PI
  7. var beginAngle = angle * base;
  8. for ( var i = 1; i <= 12; i++) {
  9. ctx.beginPath();// 开始一个路径
  10. if (i === 1) {
  11. ctx.rotate(beginAngle);
  12. } else {
  13. ctx.rotate(angle);// 每次调用rotate之后,其旋转角度并不会还原,而是接着上一次的
  14. }
  15. ctx.arc(0, -48, i * 0.8 + 1, 0, 2 * Math.PI, true);// 绘制一个圆点
  16. ctx.closePath();// 闭合路径
  17. ctx.fill();
  18. }
  19. ctx.restore();// 还原绘图状态,如果不还原,则下一次调用roatate时会接着这次的位置旋转,而不是初始位置
  20. }

  

demon https://github.com/breakfriday/loadingDemo

html5 css3 loading 效果的更多相关文章

  1. HTML5+CSS3 loading 效果收集--转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  2. CSS3 loading效果全

    梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...

  3. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果!

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  4. css3 loading效果

    file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...

  5. css3 loading 效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  7. 9款极具创意的HTML5/CSS3进度条动画(免积分下载)

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  8. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  9. 推荐7款新鲜出炉的HTML5/CSS3应用

    1.HTML5/CSS3发光文字可自定义文字色彩效果很赞 要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示 源码下载 2.H ...

随机推荐

  1. 前端 js 实现简单 表单提交

    1. 登录页 验证用户身份,登录成功之后等待一定秒数,跳转到操作页面 <html> <head> <title>Login.html</title> & ...

  2. currentColor-CSS3非常有用的变量

    一.currentColor-简介 currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如: .xxx { border: 1px solid currentColor ...

  3. 【目录】processing

    Processing 小代码 小代码2 小代码3 小代码4 小代码5

  4. 基于Struts2CRUD的质量属性

    基于struts2框架开发的<学生管理系统>的质量属性 我们经常重新设计系统,可能不是因为该系统在功能上有缺陷,而是由于:系统运行速度太慢.系统容易受到外界攻击.用另外的一句话说:我们修改 ...

  5. LeetCode之171. Excel Sheet Column Number

    ---------------------------------- 乘权相加即可. AC代码:(从右往左) public class Solution { public int titleToNum ...

  6. C/C++中无条件花括号的妙用

    C/C++中无条件花括号可以形成一个代码块,一个作用域.可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同. 在花括号内,如果变量前面带类型,则相当于新创建一个 ...

  7. 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法

    问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...

  8. 【转】Oracle索引列NULL值引发执行计划该表的测试示例

    有时开发进行表结构设计,对表字段是否为空过于随意,出现诸如id1=id2,如果允许字段为空,因为Oracle中空值并不等于空值,有可能得到意料之外的结果.除此之外,最关键的是,NULL会影响oracl ...

  9. 【Alpha】Daily Scrum Meeting第九次

    一.本次Daily Scrum Meeting主要内容 汇报情况. 上次提到的数据库字段问题,已经和合作队伍统一完毕. 在服务器上解析Json数据仍在解决中,现在直接使用手机发过去的数据进行解析. 二 ...

  10. Java技巧(代码简略)

    1.将数组循环显示 int[] num = new int[]{1,3,5,7,9}; int currentNum=0; num[++current%num.length];