<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Progress Bar</title>

    <script type="text/javascript">

        var i = 0;

        var res = 0;

        var context = null;

        var total_width = 300;/*宽度*/

        var total_height = 34;/*高度*/

        var initial_x = 20;

        var initial_y = 20;

        var radius = total_height/2;

        window.onload = function() {

            var elem = document.getElementById('myCanvas');

            if (!elem || !elem.getContext) {

                return;

            }

            context = elem.getContext('2d');

            if (!context) {

                return;

            }

            // set font

            context.font = "16px Verdana";

            // Blue gradient for progress bar

            var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0);

            progress_lingrad.addColorStop(0, '#4DA4F3');/*加载完下面的颜色*/

            progress_lingrad.addColorStop(0.4, '#ADD9FF');/*加载完中间的颜色*/

            progress_lingrad.addColorStop(1, '#9ED1FF');/*加载完上面的颜色*/

            context.fillStyle = progress_lingrad;

            //draw();

            res = setInterval(draw, 30);

        }

        function draw() {

            i+=1;

            // Clear everything before drawing

            context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15);

            progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius);

            progressBarRect(context, initial_x, initial_y, i, total_height, radius, total_width);

            progressText(context, initial_x, initial_y, i, total_height, radius, total_width );

            if (i>=total_width) {

                clearInterval(res);

            }

        }

        function roundRect(ctx, x, y, width, height, radius) {

            ctx.beginPath();

            ctx.moveTo(x + radius, y);

            ctx.lineTo(x + width - radius, y);

            ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);

            ctx.lineTo(x + radius, y + height);

            ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

            ctx.closePath();

            ctx.fill();

        }

        function roundInsetRect(ctx, x, y, width, height, radius) {

            ctx.beginPath();

            // Draw huge anti-clockwise box

            ctx.moveTo(1000, 1000);

            ctx.lineTo(1000, -1000);

            ctx.lineTo(-1000, -1000);

            ctx.lineTo(-1000, 1000);

            ctx.lineTo(1000, 1000);

            ctx.moveTo(x + radius, y);

            ctx.lineTo(x + width - radius, y);

            ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);

            ctx.lineTo(x + radius, y + height);

            ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

            ctx.closePath();

            ctx.fill();

        }

        function progressLayerRect(ctx, x, y, width, height, radius) {

            ctx.save();

            // Set shadows to make some depth

            ctx.shadowOffsetX = 2;

            ctx.shadowOffsetY = 2;

            ctx.shadowBlur = 5;

            ctx.shadowColor = '#666';

             // Create initial grey layer

            ctx.fillStyle = 'rgba(189,189,189,1)';

            roundRect(ctx, x, y, width, height, radius);

            // Overlay with gradient

            ctx.shadowColor = 'rgba(0,0,0,0)'

            var lingrad = ctx.createLinearGradient(0,y+height,0,0);

            lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)');

            lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)');

            lingrad.addColorStop(1, 'rgba(255,255,255,0.4)');

            ctx.fillStyle = lingrad;

            roundRect(ctx, x, y, width, height, radius);

            ctx.fillStyle = 'white';

            //roundInsetRect(ctx, x, y, width, height, radius);

            ctx.restore();

        }

        function progressBarRect(ctx, x, y, width, height, radius, max) {

            // var to store offset for proper filling when inside rounded area

            var offset = 0;

            ctx.beginPath();

            if (width<radius) {

                offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius-width),2));

                ctx.moveTo(x + width, y+offset);

                ctx.lineTo(x + width, y+height-offset);

                ctx.arc(x + radius, y + radius, radius, Math.PI - Math.acos((radius - width) / radius), Math.PI + Math.acos((radius - width) / radius), false);

            }

            else if (width+radius>max) {

                offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius - (max-width)),2));

                ctx.moveTo(x + radius, y);

                ctx.lineTo(x + width, y);

                ctx.arc(x+max-radius, y + radius, radius, -Math.PI/2, -Math.acos((radius - (max-width)) / radius), false);

                ctx.lineTo(x + width, y+height-offset);

                ctx.arc(x+max-radius, y + radius, radius, Math.acos((radius - (max-width)) / radius), Math.PI/2, false);

                ctx.lineTo(x + radius, y + height);

                ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

            }

            else {

                ctx.moveTo(x + radius, y);

                ctx.lineTo(x + width, y);

                ctx.lineTo(x + width, y + height);

                ctx.lineTo(x + radius, y + height);

                ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

            }

            ctx.closePath();

            ctx.fill();

            if (width<max-1) {

                ctx.save();

                ctx.shadowOffsetX = 1;

                ctx.shadowBlur = 1;

                ctx.shadowColor = '#666';

                if (width+radius>max)

                  offset = offset+1;

                ctx.fillRect(x+width,y+offset,1,total_height-offset*2);

                ctx.restore();

            }

        }

        function progressText(ctx, x, y, width, height, radius, max) {

            ctx.save();

            ctx.fillStyle = 'white';

            var text = Math.floor(width/max*100)+"%";

            var text_width = ctx.measureText(text).width;

            var text_x = x+width-text_width-radius/2;

            if (width<=radius+text_width) {

                text_x = x+radius/2;

            }

            ctx.fillText(text, text_x, y+22);

            ctx.restore();

        }

    </script>

</head>

<body>

    <p>

        <canvas id="myCanvas" width="800" height="150"></canvas>

    </p>

</body>

</html>

canvas加载进度条的更多相关文章

  1. Unity3D 场景切换加载进度条实现

    需要三个场景,场景A,场景B,场景C: 场景A:一个按钮,点击加载场景B: 场景B:从A切换到C过度场景,加载进度条: 场景C:目标场景: 创建OnProgress.cs脚本: using Syste ...

  2. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  3. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  4. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  5. 仿UC浏览器图片加载进度条

    前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...

  6. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  7. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  8. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26

    1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

随机推荐

  1. Qt不同类之间信号槽连接

    1.类必须继承QObject. #ifndef TESTA_H #define TESTA_H #include <QObject> class TestA : public QObjec ...

  2. ACM/ICPC 之 模拟 (HNUOJ 13391-换瓶模拟)

    题意:汽水瓶有三个部分cap+plastic bottle+ label(瓶盖-瓶身-瓶底),给出数据:n为原瓶数,x,y,z为这三个部分可以用相应的数字换取新瓶子,求最大总瓶数. 模拟(暴力) // ...

  3. ePass1000 Full ActiveX Control Reference Manual Version 2.0

    ePass1000 Full ActiveX Control Reference Manual Version 2.0 Error Code Value Return Status Descripti ...

  4. java入门 第一季3

    运算符:算术运算符,赋值运算符,比较运算符,逻辑运算符,条件运算符 1. 算术运算符: 自增和自减只能用于操作变量,不能直接用于操作数值和常量 % 求余数 2.  赋值运算符 = 赋值运算符为变量或常 ...

  5. codeforces 425C Sereja and Two Sequences（DP）

    题意读了好久才读懂....不知道怎么翻译好~~请自便~~~ http://codeforces.com/problemset/problem/425/C 看懂之后纠结好久...不会做...仍然是看题解 ...

  6. vs2013显示行号

    随便打开一个项目,可以看到代码框内并没有显示行号 选择“工具”-“选项”,打开后界面如下 选择文本编辑器,找到下图中的“行号”并勾选 行号可以显示了 5 这样我们就完成了任务

  7. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  8. 表单中Readonly和Disabled的区别(转载)

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...

  9. Android仿快递 物流时间轴 的代码实现

    首先,这篇参考了别人的代码.根据自己的项目需求简单改造了一下,效果图如下 xml:代码 <?xml version="1.0" encoding="utf-8&qu ...

  10. IOS - 本地消息推送

    第一步:创建本地推送 // 创建一个本地推送 UILocalNotification *notification = [[[UILocalNotification alloc] init] autor ...