<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>等待载入</title>
</head>
<body>
<canvas id="wait" height="100" width="100">你的浏览器不支持canvas</canvas>
<script>
var wait = document.getElementById('wait').getContext('2d');
wait.fillRect(0,0,100,100); //translate() 方法重新映射画布上的 (0,0) 位置,canvas绘图是基于状态的
wait.translate(50,50); //每次旋转角度
var angle = Math.PI*2/12;
var cos = Math.cos(angle);
var sin = Math.sin(angle); wait.lineWidth = 4 ;
wait.lineCap = 'round' ; var c = 0;
setInterval(rotate,25);
function rotate(){
var col = Math.floor(200/6*(c%13));
c++;
//任何一个html元素渲染完成后可以得到一张位图,把这张位图上所有的点都做一次矩阵运算,将得到一张的新的位图
//一个数学公式,每次旋转30度
wait.transform(cos,sin,-sin,cos,0,0); wait.strokeStyle = 'rgba(0,0,'+col+',1)';
wait.beginPath();
wait.moveTo(10,0);
wait.lineTo(40,0);
wait.stroke();
} </script>
</body>
</html>

效果:

http://jsfiddle.net/aBK5Q/19/

html5--等待加载效果的更多相关文章

  1. 慢工出细活 JS 等待加载效果

    实例可以直接运行查看效果.很方便快捷 <html> <head> <meta http-equiv="content-Type" content=&q ...

  2. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

  3. 使用css3实现小菊花加载效果

    使用css3实现小菊花加载效果 最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...

  4. 黄聪:WordPress实现HTML5预加载

    WordPress实现HTML5预加载方法很简单,把下面代码: <?php if (is_archive() && ($paged > 1) && ($pa ...

  5. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

  6. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  7. 美团、点评、猫眼App下拉加载效果的源码分享

    今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果   以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...

  8. layui的几个简单使用(简单弹窗,加载效果,移除加载效果)

    1.加载效果和移除加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.loa ...

  9. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  10. HTML5 预加载

    原文地址: HTML5 Link Prefetching 原文日期: 2010年07月07日 翻译日期: 2013年08月13日 浏览器厂商和开发者之间共同努力的一个方向就是让网站更快.现在已有很多广 ...

随机推荐

  1. 无法解析的外部符号 _WinMain@16 fatal error LNK1120: 1 个无法解析的外部命令

    一,问题描述MSVCRTD.lib(crtexew.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16,该符号在函数 ___tmainCRTStartup 中被引用 ...

  2. 通过注册表检测UAC是否处于关闭状态(不弹窗)

    注册表路径: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System UAC各级别对应的注册表值: 从 ...

  3. 在一个Activity里面的TextView上面添加网页链接,启动后到另一个Activity里面!

    可以添加很多的属性,样式或者是什么的,目前要完成的功能是 点击TextView里面的某个文字链接,进入另外一个Activity里面!例如你可以做微博里面的 @XXX: 点击后进入他的个人主页! 下面都 ...

  4. VS2010常用插件介绍

    今天在写JS时,写到500多行时,感觉代码已经很难看了.想到C#代码都有折叠功能,是不是JS也有呢.在选项中找了一下,没有相关了的设置功能,于是就上网找.一找可就不得了,发现了好多好用的插件.都可以在 ...

  5. 1502: [NOI2005]月下柠檬树 - BZOJ

    Description Input 文件的第1行包含一个整数n和一个实数alpha,表示柠檬树的层数和月亮的光线与地面夹角(单位为弧度).第2行包含n+1个实数h0,h1,h2,…,hn,表示树离地的 ...

  6. SQL SERVER调优常用方法

    说起SQL SERVER的调优,我想大伙也很想知道这方面的知识.本人也正在探索的路上,大家有什么好的意见,欢迎一起探讨.研究.博取众人之长,才能扬长避短.本文中的内容主要是摘自<程序员的SQL金 ...

  7. 使用JS启动本地应用程序、屏幕键盘

    问题描述:     现在希望在Web端使用JS调用本地应用程序 问题解决:   (1)使用JS启动本地应用程序 使用上述代码重点是创建了一个ActiveXObject的对象     参考说明:     ...

  8. css块级元素、行内元素

    说说对html页面元素的排列认识: html中所有元素从上到下排列,所以需要css来对其中的元素进行排序.调节样式,并用js为其添加交互效果. css的排序.定位是相对块级元素而言的,margin/p ...

  9. 坑人的 try catch finally

    一直以为这样可以关闭 fs, 其实不行 static void Main(string[] args) { FileStream fs = null; try { fs = new FileStrea ...

  10. hlsl 的tex函数

    texCUBE http://msdn.microsoft.com/en-us/library/windows/desktop/bb509687(v=vs.85).aspx