昨天发了一篇使用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. React-Reflux 基础分享

    因工作需要使用 React + Reflux 开发,最近几天都在努力学习着,特别是 Reflux,在网上查找的许多资料和 github 上的文档年代都有点久远,JavaScript 按照目前的节奏,更 ...

  2. 基于DCT的图片数字水印实验

    1. 实验类别 设计型实验:MATLAB设计并实现基于DCT的图像数字水印算法. 2. 实验目的 了解基于DCT的图像数字水印技术,掌握基于DCT系数关系的图像水印算法原理,设计并实现一种基于DCT的 ...

  3. Tomcat性能监控

    Tomcat性能监控工具很多,这里介绍两种1.JMeter 2.probe,使用这两种工具都需要在tomcat的安装目录/conf/tomcat-users.xml添加 <tomcat-user ...

  4. 《MySQL必知必会》--使用cmd登陆数据库

    数据库:保存有组织的数据的容器(通常是一个文件或一组文件). 表:某种特定类型数据的结构化清单. 模式:关于数据库和表的布局及特性的信息. 列:表中的一个字段.所有表都是由一个或多个列组成的. 数据类 ...

  5. TypeScript : 语法及特性

    当let声明一个变量的时候它使用的词法作用域或者是块作用域.块作用域指的就是他们包含的块以外的不能访问. const声明:是let声明有相同的作用域规则,但是它被赋值后不能再被改变.类似于java的f ...

  6. nginx 日志记录 自定义详解（分析上报用）

    nginx 日志记录 自定义详解   1.log_format 普通格式 log_format main '$remote_addr - $remote_user [$time_local] $req ...

  7. 全志A64 QT移植

    1. 把编译工具 gcc-linaro-aarch64.tar.xz 添加到环境.bashrc 中 2. 下载 tslib-1.4.tar.gz ,libiconv-1.15.tar.gz ,qt-e ...

  8. 树莓派驱动DHT22

    树莓派-DHT22测量湿度 一般的温湿度传感器有dht11和dht22,dht11比较便宜,dht22比dht11贵好几倍,自然测量的准确度肯定是dht22高一些.追求更高精准度的可以使用SHT1x. ...

  9. 转载：C语言指针使用的注意事项

    相信大家对指针的用法已经很熟了,这里也不多说些定义性的东西了,只说一下指针使用中的注意事项吧. 一.在定义指针的时候注意连续声明多个指针时容易犯的错误,例如int * a,b;这种声明是声明了一个指向 ...

  10. C# base64 转 byte[]

    string转成 Base64 形式的String //byte[] 转string byte[] b = Encoding.Default.GetBytes("字符串"); // ...