<!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. 树形dp汇总

    HDU 1520 HDU 2196 Codeforces 219D POJ 1155

  2. 构建web应用示例

    1.1 请求方法的判断 var http = require('http'); var server = http.createServer(function(request,response){ s ...

  3. 请不要用SECONDS_BEHIND_MASTER来衡量MYSQL主备的延迟时间【转】

    本文来自:http://www.woqutech.com/?p=1116 MySQL 本身通过 show slave status 提供了 Seconds_Behind_Master ,用于衡量主备之 ...

  4. FFmpeg-20160428-snapshot-bin

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 F ...

  5. iOS 没有安装对应客户端，不应显示对应的图标

    现在很多APP为了让用户更加快捷方便注册,都会使用第三方进行登录,例如QQ/微信/淘宝等.但是上线审核被拒,大致会出现以下内容: Additionally, we found that your ap ...

  6. IIS7.0提示---无法识别的属性“targetFramework”。请注意属性名称区分大小写。

    当我把我做的网站放在IIS7.0的服务器上的时候,浏览时提示这个错误信息 配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消 ...

  7. 回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证。

    问题补充: “/Source”应用程序中的服务器错误. 回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或 ...

  8. [Android Pro] Android studio jni中调用Log输出调试信息

    reference to : http://www.linuxidc.com/Linux/2014-02/96341.htm Android 开发中,java 可以方便的使用调试信息Log.i, Lo ...

  9. 在R语言中无法设置CRAN镜像问题

    很大的可能是因为使用的浏览器不是IE浏览器的问题,因为CRAN的镜像需要用IE浏览器来打开. 只需要按照下面设置即可: 1.打开IE-->设置-->Internet选项-->高级 2 ...

  10. EasyUI中控件汉化问题

    --BY ZYZ 我在使用EasyUI的过程中,遇到了控件无汉化的情况,如下图. 这么多洋文看着觉得挺烦的.时间居然是月日年格式的,这样可不行,得改. 重写控件代码?别,那能是我这种低级代码C-V客能 ...