jquery和canvas制作圆形进度条效果
点击提交按钮,生成提交圆环进度样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style type="text/css"> /*CSS源代码*/ button{ display:inline-block; padding:10px 28px; margin-top:50px; margin-left:50px; font-size:18px; font-weight:normal; text-align:center; border:2px solid #1aba9c; border-radius:4px; color:#1aba9c; background:#ffffff; } button:hover{ color:#ffffff; background:#1aba9c; } </style> </head> <body> <!-- HTML代码片段中请勿添加<body>标签 //--> <button type="button">提交</button> <canvas id="c" width="400" height="200"></canvas> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <script> /*Javascript代码片段*/ $("button").click(function(){ $(this).hide(); var i = 0; if (i == 0) { var time = setInterval( function(){ ++i; schedule(i); if (i >= 100) { clearInterval(time); $("canvas").hide(); $("button").fadeIn(); return; }}, 30); } }); function schedule(vlaue){ var process =vlaue; var canvas=document.getElementById("c"); var context = canvas.getContext('2d'); context.clearRect(0, 0, 200, 200); //开始画一个灰色的圆 context.beginPath(); // 坐标移动到圆心 context.moveTo(100, 100); context.arc(100, 100, 50, 0, Math.PI * 2, false); context.closePath(); // 填充颜色 context.fillStyle = '#ddd'; context.fill(); // 画扇形 context.beginPath(); context.moveTo(100, 100); context.arc(100, 100,50,1.5*Math.PI, Math.PI * 2 * process / 100+1.5*Math.PI); //填充颜色 context.closePath(); context.fillStyle = '#1aba9C'; context.fill(); //画掏空心 context.beginPath(); context.moveTo(100, 100); context.arc(100, 100, 40, 0, Math.PI * 2); context.closePath(); context.fillStyle = 'rgb(255,255,255)'; context.fill(); //在中间写字 context.font = " 22px Arial"; context.fillStyle = '#1aba9C'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.moveTo(100, 100); context.fillText(process+"%", 100, 100); } </script> </body> </html>
.
相关推荐
【标题】:“canvas 圆形进度条效果” 在网页开发中,Canvas API 是一个强大的工具,它允许开发者在网页上动态绘制图形。本项目提供的“canvas 圆形进度条效果”是一个利用 JavaScript 和 HTML5 Canvas 绘制的简单...
"Swift-iOS圆形进度条效果"是一个专为提升用户体验而设计的功能,特别适用于展示加载状态或表示一个任务的完成度。这种圆形进度条通常作为活动指示器,给用户一个视觉反馈,让他们知道应用正在处理数据或执行操作。 ...
"Float Button 圆形进度条效果.zip"是一个开源项目,它将这两者结合起来,为用户提供了一种独特的交互体验。 首先,我们来看浮動動作按鈕(Floating Action Button, FAB)。FAB设计的主要目标是突出并简化用户界面...
本教程将详细讲解如何利用Canvas实现一个圆形进度条效果。 首先,我们需要在HTML文档中创建一个`<canvas>`元素,为绘制圆形进度条提供画布。例如: ```html <!DOCTYPE html> <title>Canvas圆形进度条 ...
"iOS 圆形进度条效果.zip"提供了一个名为"CircularSpinner-master"的开源项目,它允许开发者实现全屏圆形旋转器,用于显示确定或不确定的任务进度。这个项目不仅美观,而且功能实用,特别适用于在数据加载或处理过程...
"安卓进度条loadingprogress相关-Android自定义圆形进度条效果.rar"这个压缩包文件显然包含了一个关于自定义圆形进度条的示例项目。圆形进度条在很多应用中都有广泛的应用,如加载数据、下载文件或网络请求时显示...
Android 实现渐变圆环、圆形进度条效果 Android 实现渐变圆环、圆形进度条效果是 Android 开发中一个常见的需求,通过使用 Canvas 和 Paint 类,可以实现各种形状和效果的绘制。下面将详细介绍 Android 实现渐变...
"js圆形进度条css圆形进度条.zip"是一个压缩包,包含了实现圆形进度条效果的资源,适用于JavaScript(js)和CSS(css)技术。这个圆形进度条设计允许用户自定义样式,并且具有良好的浏览器兼容性,支持IE8及以上版本...
在这个“HTML5中的SVG属性实现圆形进度条效果”的示例中,我们将深入探讨如何利用SVG以及相关的CSS3和jQuery技术来创建一个动态的圆形进度条。 首先,SVG在HTML5中的应用主要是通过`<svg>`标签来创建图形。这个标签...
Android自定义圆形进度条效果有进度标识点,有需要的可以看一下
在Swift编程语言中,创建一个类似Apple Store的下载圆形进度条效果可以借助自定义视图实现,这通常涉及到UI设计和动画处理。本教程将基于`UbiqArchView`库来探讨如何实现这一功能。 首先,`UbiqArchView`是一个专为...
这个“html5 canvas实现的圆形进度条效果源码.zip”文件很显然是一个示例项目,用于展示如何使用Canvas API来构建一个圆形的进度条组件。 在HTML5中,`<canvas>`元素提供了一个画布,通过JavaScript可以在这个画布...
总共分为三层:一层为圆形边线,一层为进度边线,一层用来显示标识进度节点。 public class CircleProgressBar extends View { private int maxProgress = 100; private int progress = 15; private int ...
总的来说,"ios圆形进度条代码"是一个针对iOS的自定义视图组件,它实现了美观且可定制的圆形进度条效果。开发者通过深入理解和运用Core Graphics、Auto Layout以及动画原理,实现了这一功能。这个代码示例对于学习...
在Windows Presentation Foundation (WPF) 中,圆形进度条是...通过运行这个项目,你可以看到实际的圆形进度条效果。通过学习和理解这些代码,你将能够为你的WPF应用程序添加类似的功能,为用户提供更丰富的交互体验。
在C# WinForm开发中,有时我们希望创建更具有视觉吸引力和独特性的用户界面元素,圆形进度条就是其中一种。本教程将详细讲解如何利用C#和GDI+技术实现一个改良版的圆形进度条,它不仅展示了进度,还能够在进度条内部...
圆形进度条是一种常见的UI元素,常用于展示数据加载、任务完成度或过程监控等场景。"带进度的圆形进度条,可显示百分比"这个主题,就是关于如何创建这样一个动态的、具有反馈功能的图形组件的讨论。 首先,我们要...
在.NET框架中,创建一个“漂亮的圆形进度条”可以为用户界面增添美观和现代感,同时提供一种直观的方式来展示任务的进度。C#语言提供了丰富的控件和自定义绘图功能,使得开发者能够轻松实现这样的效果。下面我们将...