昨天发了一篇使用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. python drf+xadmin+react+dva+react-native+sentry+nginx 搭建前后端分离的博客完整平台

    前言: 经过差不多半年的开发,搭建从前端到服务器,实现了前后端分离的一个集PC端.移动端的多端应用,实属不易,今天得空,好好写篇文章,记录这些天的成果.同时也做个分享. 演示网站地址: http:// ...

  2. python初学者日记02(正则表达式)

    写作时间:2018/12/17 作者:永远的码农(博客园) 一.正则表达式简介: 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或R ...

  3. yii学习笔记（3），自定义全局工具函数

    在平时开发是经常需要打印数据来调试 常见的打印方式有print_r和var_dump,但是这样打印出来格式很乱不好浏览 在打印函数前后加上<pre></pre>就可以将内容原样 ...

  4. 小程序开发-9-Behavior行为与加入缓存系统优化流行页面

    Behavior行为与加入缓存系统优化流行页面 navi组件与移动端触碰区域探讨 触碰区域优化 设计师切图切大点,多余部分变成透明色 前端将可触碰区域变大 解决向左箭头变灰,向右变灰 禁用事件的技巧 ...

  5. HTML基础part2

    表单标签form 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.sel ...

  6. Java设计模式（20）——行为模式之命令模式（Command）

    一.概述 概念 类似C中的callback! UML简图 角色 客户端:创建具体命令,指定接收者 命令接口:声明命令的接口 具体命令:定义接收者和行为之间的弱耦合(execute执行方法) 请求者(I ...

  7. 《图说VR入门》——googleVR入门

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/52959035 作者:car ...

  8. 北京Uber优步司机奖励政策（12月11日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. Nodejs中的流

    Nodejs中的很多地方都用到了流,流是一个很常见的概念,一个http请求,控制台输入输出的形式都是流.流可以分为三种: 可读流 可写流 既能读又能写 其中第三种流又可以分为全双工流Duplex和转换 ...

  10. P1209 [USACO1.3]修理牛棚 Barn Repair

    P1209 [USACO1.3]修理牛棚 Barn Repair 题目描述 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹飞了. 好在许多牛正在度假,所以牛棚没有住满. ...