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#语言提供了丰富的控件和自定义绘图功能，使得开发者能够轻松实现这样的效果。下面我们将...