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

随机推荐

Pooled Allocation(池式分配)实例——Keil 内存管理
引言:说到动态申请(Dynamic Allocation)内存的好处,学过C/C++的人可能都有体会.运行时的灵活申请自然要比编码时的猜测好的多.而在内存受限情况下这种灵活性又有特别的好处--能让我们 ...
bing壁纸xml地址
http://www.bing.com/gallery/?src=livesino# http://www.bing.com/HPImageArchive.aspx?format=xml&id ...
DP:Cow Exhibition(POJ 2184)（二维问题转01背包）
牛的展览会题目大意:Bessie要选一些牛参加展览,这些牛有两个属性,funness和smartness,现在要你求出怎么选,可以使所有牛的smartness和funness的最大,并且这两 ...
【leetcode】Word Search II(hard)★
Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...
You know元音字母吗？
所谓元音字母,或者母音字母,就是语言里起着发声作用的字母.在英语中,A.E.I.O.U属于元音字母,其中U是半元音开音节和闭音节为数不多的5个元音字母看似简单,他们却能像变戏子一样跟辅音组合拼读成不同 ...
xp系统打开软件程序总是弹出警告窗口，很烦人对不，怎么办呢？进来看
为了不浪费比较着急的朋友的的时间,先把解决方案说了,下面我在细说: 细说: 今天装了个xp的虚拟机,为了不在xp里重复装真机(win7的)里已经有的软件,就把我的工具盘共享给了虚拟机,大部分软件都可以 ...
php生成对象的研究
<?php abstract class E{ protected $name; function __construct($name){ $this->name = $name; } a ...
August 12th 2016 Week 33rd Friday
Everything is good in its season. 万物逢时皆美好. Every dog has its day. You are not in your best condition ...
LTS学习
下载例子安装部署zookeeper 运行根目录下的sh build.sh或build.cmd脚本 --> 会在dist目录下生成lts-{version}-bin文件夹(bin里有启动命令) ...
ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（十）之自定义系统消息和总结
前言本篇主要讲解一个东西,就是我们自定义系统消息.效果如下: 首先我们要做的准备工作就是改写 layim 的消息模板,如果不改的话就成为某个用户发送的消息了,那么体验就稍微差一些.找到模板我们看一下 ...

canvas加载进度条

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

随机推荐

热门专题