昨天发了一篇使用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. 【转载】JavaScript导出Excel

    [转载]JavaScript导出Excel 原文地址 如果没有用到前端插件,也没有用到后台poi导出的话,用js导出也是一种方式.亲测可用. /** * 导出excel */ var idTmr; f ...

  2. Linux 学习第四天

    Linux学习第四天 一.常用命令 1.tar  (压缩.解压) A.添加压缩包  tar czvf 压缩包名称.tar.gz 源文件 B.添加压缩包  tar cjvf 压缩包名称.tar.bz2 ...

  3. python 基于Anaconda import numpy 报错 Importing the multiarray numpy extension module failed.

    在windows中安装了 Anaconda 运行时报错 原因是系统环境变量起初并没有引入 E:\Tools\Anaconda\Library\bin 解决办法: 在系统环境变量中加入    E:\To ...

  4. laravel4.2 Redis 使用

    laravel4.2 Redis 使用 配置文件,app/config/database.php 'redis' => array( 'cluster' => false, 'defaul ...

  5. Java软件开发者，如何学习大数据？

    正常来讲学习大数据之前都要做到以下几点 1.学习基础的编程语言(java,python) 2.掌握入门编程基础(linux操作,数据库操作.git操作) 3.学习大数据里面的各种框架(hadoop.h ...

  6. opencv移植（二）

    原文:https://blog.csdn.net/Guet_Kite/article/details/78667175?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接 ...

  7. 【C】数据类型和打印(print)

    char -128 ~ 127 (1 Byte) unsigned char 0 ~ 255 (1 Byte) short -32768 ~  32767 (2 Bytes) unsigned sho ...

  8. python学习第三天 -----2019年4月23日

    第三周-第03章节-Python3.5-集合及其运算 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 ...

  9. python3 练习题100例 （六）

    题目六:斐波那契数列(Fibonacci sequence),又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.……. #!/usr/bin/env python3 ...

  10. 用elk+filebeat监控容器日志

    elk  为 elasticsearch(查询搜索引擎),logstash(对日志进行分析和过滤,然后转发给elasticsearch),kibana(一个web图形界面用于可视化elasticsea ...