昨天发了一篇使用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. 20181029NOIP模拟赛T2

    2.追捕 [题目背景] Duan2baka:“jmsyzsfq天下第一蠢!” jmsyzsfq:“你说什么?!” [题目描述] 于是Duan2baka开始了逃亡的旅程,而jmsyzsfq也开始追捕Du ...

  2. 用Jquery控制元素的上下移动 实现排序功能

    在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用jQuery 写个 简单方便,功能齐全的实现方式. 话不多说,直接上代码,下面是基础的引入jq和html元素部分: <scrip ...

  3. 一、Vue项目构建

    Attention:以下内容为Mac机上运行,windows可能有所偏差- Step1 打开终端,键入npm install -g vue-cli,使用vue-cli脚手架搭建vue项目能省很多事儿- ...

  4. windows简易使用composer 安装国内镜像

    1.下载composer.phar文件 地址: https://getcomposer.org/download/  从下面选择一个 2.下载成功,新建项目(找到已有的项目文件夹)文件夹(D:\PHP ...

  5. swoole学习(二)----搭建server和client

    1.搭建server 1.1搭建server.php 1.搭建websocket服务器,首先建立 server.php 文件, <?php $server = new swoole_websoc ...

  6. hadoop生态搭建（3节点）-10.spark配置

    # https://www.scala-lang.org/download/2.12.4.html# ================================================= ...

  7. Zabbix 3.4.11监控 apache服务，ftp服务的配置

    一 zabbix 的安装部署 略 二监控 apache服务的配置 首先在本机下载模板:https://github.com/rdvn/zabbix-templates/archive/m aster. ...

  8. 《JavaScript实用效果整理》系列分享专栏

    整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 <JavaScript实用效果整理>已整理成PDF文档,点击可直 ...

  9. Java语法糖 : try-with-resources

    先了解几个背景知识 什么是语法糖 语法糖是在语言中增加的某种语法,在不影响功能的情况下为程序员提供更方便的使用方式. 什么是资源 使用之后需要释放或者回收的都可以称为资源,比如JDBC的connect ...

  10. golang使用rabbitMQ入门代码

    package main import ( "github.com/streadway/amqp" "log" "time" ) func ...