现在有很多的 loading 组件 什么js 等等 闲来没事就写一个 H5的 loading 
  有很多的Loading 是一张张图片 js 控制的 
    有了 canvas的 出现 你就可以体验不同之处了 
自己效仿前人的做法去看两种的效率 和占用的资源 chrome=>更多工具=>资源管理器 
  Canvas : 初期比图片占用大一点,能接受, 后面会降下来, 而且一直稳定。 
  图片+js: 初期效果满意 越到后面 资源占用越多 。 
<只是画圆 如果你想要图片,后文会给介绍> 
我们都知道 HTML 5里面的 canvas 是一个矩形 你可以做的事情有很多 只要在这个矩形里面就行 。 
原理: 在一个canvas 里面循环的去画弧 要想圆弧连贯就要控制每一次擦除和绘制的间隔 ; 
你要是做图片的话 就想想什么帧 PAL控制线之类的 一秒运动多少像素比较好 连贯… … 
需要用到的东西有:

setInterval()

canvas

ajax(这东西提示一个思路就行了)

上图:

这就是要绘制的布置,然后现在可以做点事情了。

由于是简单示例 就不做的太华丽了,还是上代码吧。

<div style=" padding-left: 600px;" id=‘loading_panl’>
<lable id="lbl_Info"></lable>
<canvas id="test" width=200 height=200></canvas>
</div>

毕竟手机啊 什么的都是在页面的中间去显示loading 然后加载出来需要的素材

画布有了 我们就该开始绘画了

 <script>
var deg = 0; //全局变量 用来存放 canvas 绘制的角度
var test = function(deg,test){ //角度、 canvasid //获取画布 对象
var canvas2d = document.getElementById("test").getContext("2d");
//canvas绘制圆形进度
var r = deg*Math.PI/180;
//绘制文字 filltext( text,x,y)
canvas2d.fillText("正在玩命加载中. . . . ",65,140);
//填充颜色
canvas2d.fillStyle = "#B2DFF5";
//由于想让圆形动起来 就要一直擦除 重绘
// 区域自己控制一下
//手机需要在有限的屏幕中做很多事情 还是精确到像素吧(有残留的一点点没清掉 请将像素加上 0.5)
canvas2d.clearRect(0,0,200,122);
//开始绘制
canvas2d.beginPath();
//canvas的外圆颜色
canvas2d.strokeStyle = "#84F2ED";
//圆外框的宽度 别太宽 有点恶心
canvas2d.lineWidth = 2.5;
//canvas绘制弧形
canvas2d.arc(100,100,20,0-90*Math.PI/180,r-90*Math.PI/180,false);
canvas2d.fill();
canvas2d.stroke();
canvas2d.closePath();
};
//使用定时器让html5 canvas绘制圆形进度动起来
//此时你可以使用 ajax 来做请求了
Example:
$.ajax({
url:"",
data:{},
success(data)
{
// clearInterval(t);
//隐藏之前那个DIV咯
},
error:
{
// 提示页面那个lable 提示加载失败的原因 <要分手的时候 理由即使牵强都没办法>
} }) var t = setInterval(function(){
//循环给 圆弧加角度
//如果你需要快就加的多一点吧
deg+=2;
//调用绘制方法
test(deg);
//转一圈还是N圈就看你的喜好了。
if(deg>=365){ deg=0;
}
},20);
</script>

现在 就来说说图片的 laoding 怎么做吧:

从图中 可以选择两种方式

如果你是选择 上下动 那就是选择 黄色区域框 
  这时候 你就要 设置一个最高点 和一个最低点 用来做图片的上下波动 的区域 
如果你是选择 左右动 那就是选择 蓝色区域框 
  这时候 你就要 设置一个最左点 和一个最右点 用来做图片的左右滑动的零界点 
图片的 运动 就是 每间隔 多少毫秒清除 重绘 (电影最基础是一秒24帧 那就用个25帧吧)  

帧  也就是你一次运动的距离

  同上咯 你可以当你在点击 search 的时候去触发 你的loading 方法 
原理说清楚了 按理说的确是应该上代码的 ,关于图片的此效果 这时候就用一张效果图来告诉你们吧。

每个人的审美都不一样   我自己觉得这效果 我看不下去 ,希望你能玩出更多的花样

HTML5 绘制简单圆形 loading. . . .的更多相关文章

  1. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

    Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...

  4. JavaScript动画基础:canvas绘制简单动画

    动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  5. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  6. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  7. OpenGL学习-------绘制简单的几何图形

    本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念在计算机中会有所不同.数学上的 ...

  8. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  9. 【html5】html5本地简单存储

    html5本地简单存储 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage.Web Sql Database. 前 ...

随机推荐

  1. grails 优缺点分析

    Grails是一套用于快速Web应用开发的开源框架,它基于Groovy编程语言,并构建于Spring.Hibernate等开源框架之上,是一个高生产力一站式框架. 易于使用的基于Hibernate的对 ...

  2. bzoj 3506 && bzoj 1552 splay

    查最小值,删除,翻转... 显然splay啊... #include<iostream> #include<cstdio> #include<algorithm> ...

  3. css-列表或标题的多级计数

    利用css实现多级计数,比如1/1.1/1.1.1这种层层嵌套的计数,主要利用到counter-reset/counter-increment/counter/content/:before. 一.标 ...

  4. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  5. 18. class

    Class 基本用法 class n { constructor(x,y) { this.x = x; this.y = y; console.log(x,y) } proint() { consol ...

  6. win10下的使用

    一.win10下使用win7那样的图片查看器快些. 打开图片的设置,关闭自动增强我的图片 二.查看win10秘钥 1.打开注册表,依次定位:HKEY_LOCAL_MACHINE/SOFTWARE/Mi ...

  7. 制作宅基腐主页 && 制作个人简历--材料:BootStrap

    宅基腐主页 主页分为四大板块:导航栏,轮播图,主页内容,相关信息. 导航栏:<nav>标签,class="navbar",navbar-inverse为反色,navba ...

  8. thinkphp添加数据

    <?php namespace Admin\Controller; use Think\Controller; class MainController extends Controller { ...

  9. Thread 学习记录 <1> -- volatile和synchronized

    恐怕比较一下volatile和synchronized的不同是最容易解释清楚的.volatile是变量修饰符,而synchronized则作用于一段代码或方法:看如下三句get代码: int i1;  ...

  10. BAYSY2 的LVDS引脚 笔记

    差分引脚标号说明: 'L' 代表该引脚属于差分引脚 'xx' 两位整型数,在每一 bank 的独特标记 'y' 表示正向 还是 反向,同时要注意输入输出方向 ‘#’ 0~3,代表 bank0~bank ...