canvas加载进度条

<!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加载进度条的更多相关文章

Unity3D 场景切换加载进度条实现
需要三个场景,场景A,场景B,场景C: 场景A:一个按钮,点击加载场景B: 场景B:从A切换到C过度场景,加载进度条: 场景C:目标场景: 创建OnProgress.cs脚本: using Syste ...
css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
仿UC浏览器图片加载进度条
前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...
【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26
1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

随机推荐

unity3d项目文件目录发布后，对应的ios/android应用目录[转]
Unity3d的Resource.AssetBundle与手游动态更新的报告,在这里分享一下,希望能够对各位用Unity的朋友有些许帮助.目录:1.Unity的资源数据加载2.Resource.Str ...
64位win系统上面tomcat6启动不了 window不能再本地计算机启动
64位的jdk装完之后,jre的bin目录下面没有client文件夹, 而tomcat6.0.20的默认配置启动在client文件夹下面. 所以打开tomcat6w,在java选项界面,取消Use d ...
ACM/ICPC 之暴力打表(求解欧拉回路)-编码（POJ1780）
///找到一个数字序列包含所有n位数(连续)一次且仅一次 ///暴力打表 ///Time:141Ms Memory:2260K #include<iostream> #include< ...
JSP页面格式化货币金额，千分位
<fmt:formatNumber value="${值}" pattern="currency"></fmt:formatNumber> ...
在Linux下记录所有用户的登录和操作日志
一般我们可以用history命令来查看用户的操作记录,但是这个命令不能记录是哪个用户登录操作的,也不能记录详细的操作时间,且不完整:所以误操作而造成重要的数据丢失,就很难查到是谁操作的. 在这里我们通 ...
hdu 1002.A + B Problem II 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 题目意思:就是大整数加法. 两年几前做的,纯粹是整理下来的. #include <stdi ...
JSP公用COMMON文件
head.jsp: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
Hibernate 所有缓存机制详解
hibernate提供的一级缓存 hibernate是一个线程对应一个session,一个线程可以看成一个用户.也就是说session级缓存(一级缓存)只能给一个线程用,别的线程用不了,一级缓存就是和 ...
让项目同时支持ARC和非ARC
ttp://code4app.com/snippets/one/禁止某几个文件用ARC模式编译/502344256803fa246d000000#s0 如果你的绝大部分代码需要ARC,那么就设置项目支 ...
merge
当两个DataFrame相加的时候,如果,其中一个不全则会相加产生NA,所以必须一次性将数据的索引索引确定下来,然后对所有数据重建索引然后,填充0,再相加.否则有数据的和没数据的相加结果都变为了NA, ...

canvas加载进度条

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

随机推荐

热门专题