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进 ...

随机推荐

Centos7 修改SSH 端口
修改/etc/ssh/sshd_config vi /etc/ssh/sshd_config #Port 22 //这行去掉#号,防止配置不好以后不能远程登录,还得去机房修改,等修改以后的端口能使用以 ...
数组里的数据绑定到dataset中
string [] an = {"a","b","c"};DataTable dt = new DataTable(); dt.Column ...
Effective C++ -----条款44：将与参数无关的代码抽离templates
Templates生成多个classes和多个函数,所以任何template代码都不该与某个造成膨胀的template参数产生相依关系. 因非类型模板参数(non-type template para ...
C#字符串的四舍五入
Round(Decimal) Round(Double) Round(Decimal, Int32) Round(Decimal, MidpointRounding) Round(Double, In ...
OKhttp的封装（下）
OKhttpManager2.Class 请求工具类 package com.example.administrator.okhttp3; import android.os.Handler; im ...
最详细的 Android Toolbar 开发实践总结
http://www.codeceo.com/article/android-toolbar-develop.html 参考此链接!
EF查询视图只得到一条记录
1.出错结果:数据库表视图有多条数据,在使用EF框架进行查询时却只得到一条数据(注:拦截EF得到的sql语句在数据库进行查询并没有任务问题). 2.出错原因:该视图中没有ID或者主键,EF查询时进行反 ...
【leetcode】 Search a 2D Matrix (easy)
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
arcgis
投影的时候两个选择: projected:平面的,以米为单位另一个:球迷的,以经纬度为单位
poj1703(各种姿势)
题目链接:http://poj.org/problem?id=1703 题意:有n个人分别属于两个团伙,接下来m组形如 ch, x, y的数据,ch为"D"表示 x, y属于不同的 ...

canvas加载进度条

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

随机推荐

热门专题