昨天发了一篇使用HTML5 canvas写的时钟的文章，今天发一篇关于使用HTML5制作loading图的文章。

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <canvas id = "canvas"></canvas>

    <script>

        var Loading = function (canvas, options) {

            this.canvas = document.getElementById(canvas);

            this.options = options;

        };

        Loading.prototype = {

            constructor: Loading,

            show: function () {

                var canvas = this.canvas,

                    begin = this.options.begin,

                    old = this.options.old,

                    lineWidth = this.options.lineWidth,

                    canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},

                    ctx = canvas.getContext("2d"),

                    color = this.options.color,

                    num = this.options.num,

                    angle = 0,

                    lineCap = this.options.lineCap,

                    CONST_PI = Math.PI * (360 / num) / 180;

                window.timer = setInterval(function () {

                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    for (var i = 0; i < num; i += 1) {

                        ctx.beginPath();

                        ctx.strokeStyle = color[num - 1 - i];

                        ctx.lineWidth = lineWidth;

                        ctx.lineCap= lineCap;

                        ctx.moveTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * begin, canvasCenter.y + Math.sin(CONST_PI * i + angle) * begin);

                        ctx.lineTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * old, canvasCenter.y + Math.sin(CONST_PI * i + angle) * old);

                        ctx.stroke();

                        ctx.closePath();

                    }

                    angle += CONST_PI;

                    console.log(angle)

                },50);

            },

            hide: function () {

                clearInterval(window.timer);

            }

        };

        (function () {

            var options = {

                num : 8,

                begin: 20,

                old: 40,

                lineWidth: 10,

                lineCap: "round",

                color: ["rgb(0, 0, 0)", "rgb(20, 20, 20)","rgb(40, 40, 40)", "rgb(60, 60, 60)","rgb(80, 80, 80)", "rgb(100, 100, 100)", "rgb(120, 120, 120)", "rgb(140, 140, 140)"]

            };

            var loading = new Loading("canvas", options);

            loading.show();

        }());

    </script>

</body>

</html>

这是效果图：

这一篇也是没有注释，但这一篇比上一篇更容易理解。后面还会有一些关于HTML5 canvas的文章，都是去年写的。

使用HTML5制作loading图的更多相关文章

  1. 利用box-shadow制作loading图

    我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...

  2. MindManager使用教程：如何导出HTML5交互式导图

    Mindmanager思维导图软件有着友好的用户界面以及丰富的思维导图制作功能.再搭配与Microsoft 软件的无缝集成功能,使得这款思维导图软件越来越受到职场人士的喜爱. 不仅是作为制作思维导图的 ...

  3. HTML5特性速记图

    今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记.速查.此图笔者收集于网络图片.

  4. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  5. 在Excel中制作雷达图

    雷达图的作用 雷达图是专门用来进行多指标体系比较分析的专业图表.从雷达图中可以看出指标的实际值与参照值的偏离程度,从而为分析者提供有益的信息.雷达图一般用于成绩展示.效果对比量化.多维数据对比等等,只 ...

  6. 用Excel制作热图(heatmap)的方法

    http://jingyan.baidu.com/article/64d05a0240ec75de55f73bd8.html 利用Excel 2010及以上版本的"条件格式"--& ...

  7. 用Canvas制作loading动画

    上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

  8. Aristochart – 灵活的 HTML5 Canvas 折线图

    Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...

  9. excel具有制作甘特图的功能

    1.Excel最大功能:数据处理.统计分析. 2.数据有效性验证: 长数字输入方法,文本前面加英文"'"(单引号)或使用文本转换. 身份证号:数据.数据有效性.文本长度. 性别:数 ...

随机推荐

  1. 洛谷P4525 【模板】自适应辛普森法1(simpson积分)

    题目描述 计算积分 结果保留至小数点后6位. 数据保证计算过程中分母不为0且积分能够收敛. 输入输出格式 输入格式: 一行,包含6个实数a,b,c,d,L,R 输出格式: 一行,积分值,保留至小数点后 ...

  2. Spring Security学习笔记（三）

    之前提到过认证后怎么存放用户信息,令牌token是一种方式,session是另一种方式,这里介绍使用spring session data redis存储httpSession. 添加了以上依赖后,我 ...

  3. python__基础 : 多继承中方法的调用顺序 __mro__方法

    在多继承中,如果一个子类继承了两个平级的父类,而这两个父类有两个相同名字的方法,那么一般先继承谁,调用方法就调用先继承的那个父类的方法.如: class A: def test(self): prin ...

  4. PHP删除临时文件

    /**    * 下载后直接删除临时文件    */      public function deldir($dir) {        $dh=opendir($dir);        whil ...

  5. mongodb安装 超级管理 普通用户

    安装MongoDB #1.配置mongo的yum源sudo vi /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3.4]name=MongoDB ...

  6. BugkuWeb本地包含

    知识点:$_REQUEST不是一个函数,它是一个超全局变量,里面包括有$_GET $_POST $_COOKIE的值,$_REPUEST 是接收了 $_GET $_POST $_COOKIE 三个的集 ...

  7. [POJ1014]Dividing（二进制优化多重背包）

    #include <cstdio> #include <algorithm> #include <cstring> using namespace std; int ...

  8. [HDU6326]Monster Hunter（贪心）

    用(a,b)表示一个点先失去a点HP,然后增加b点HP 首先容易证明忽略父亲条件下,任意两个点,先吃b大的最优 对于一个节点v和它的父节点u,若此时选v最优,那么就是吃到u时可以立即吃掉v, 于是可以 ...

  9. linux redhat NFS网络共享搭建

    nfs网络共享 测试环境: 服务端:redhat6.7 ip:192.168.1.100 客户端:redhat6.7 ip:192.168.1.110 一.服务端 1.创建共享文件夹 权限666即可 ...

  10. Python概述

    1.什么是Python? Python是一种解释型,面向对象,动态数据类型的高级程序设计语言. Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. 像 ...