文章搬至CSDN, 最新内容请访问: http://blog.csdn.net/redstarofsleep/article/details/45092115
先看一下画出来的效果,如下图,这样一个圆环形的进度.
我这里使用HTML5的Canvas来要制作这样一个圆环形的进度,
首先是HTML页面,HTML5的文档标识是:
<!DOCTYPE html>
这个文档标识要比HTML4的简单多了.
第二步,在页面上创建一个Canvas画布元素:
<canvas class="process" width="48px" height="48px">61%</canvas>
我这里创建了一个长宽都是48像素的画布,因为我要画的圆外直径是48个像素的,在canvas元素中间写的是"61%",这个文字可不是显示在圆环中间的那个哦,这个61%是当老的浏览器不支持canvas元素时显示的文字.
好了,到此为止HTML页面的内容就基本完成了,接下来就交给Javascript了,用Javascript来描绘圆环.
function drawProcess() {
// 选出页面上所有class为process的canvas元素,然后迭代每一个元素画图(这里用Jquery的选择器选的)
$('canvas.process').each(function() {
// 第一部先拿到canvas标签中间的文字,就是那个61%(这里的stringTrim方法是我自己的方法,去前后空格的方法很多的,这里就不贴出来了)
var text = commonutil.stringTrim($(this).text());
var process = text.substring(0, text.length-1);
// 一个canvas标签
var canvas = this;
// 拿到绘图上下文,目前只支持"2d"
var context = canvas.getContext('2d');
// 将绘图区域清空,如果是第一次在这个画布上画图,画布上没有东西,这步就不需要了
context.clearRect(0, 0, 48, 48);
// ***开始画一个灰色的圆
context.beginPath();
// 坐标移动到圆心
context.moveTo(24, 24);
// 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针
context.arc(24, 24, 24, 0, Math.PI * 2, false);
context.closePath();
// 填充颜色
context.fillStyle = '#ddd';
context.fill();
// ***灰色的圆画完
// 画进度
context.beginPath();
// 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形
context.moveTo(24, 24);
// 跟上面的圆唯一的区别在这里,不画满圆,画个扇形
context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
context.closePath();
context.fillStyle = '#e74c3c';
context.fill();
// 画内部空白
context.beginPath();
context.moveTo(24, 24);
context.arc(24, 24, 21, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255,255,255,1)';
context.fill();
// 画一条线
context.beginPath();
context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
context.closePath();
// 与画实心圆的区别,fill是填充,stroke是画线
context.strokeStyle = '#ddd';
context.stroke();
//在中间写字
context.font = "bold 9pt Arial";
context.fillStyle = '#e74c3c';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.moveTo(24, 24);
context.fillText(text, 24, 24);
}
好了,画完了.要看到效果别忘了调用一下画图的drawprocess方法哦.
转载请注明出处
相关推荐
HTML5 canvas 绘制圆环形进度 先看一下画出来的效果,如下图,这样一个圆环形的进度. 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: <!DOCTYPE html> 这个文档...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。在这个“html5 canvas进度条圆环图表统计动画特效”项目中，我们主要探讨以下几个关键知识点： 1. **Canvas...
在本案例中，我们关注的是使用HTML5的Canvas API来实现这样一个圆环形的进度条。Canvas是一个非常强大的图形绘制工具，它允许开发者在网页上动态绘制2D图形，无需依赖任何额外的插件。 首先，我们需要了解Canvas的...
在本文中，我们将深入探讨如何使用HTML5的Canvas API来绘制音频波形，这是一个纯JavaScript实现的方法。Canvas作为Web开发中的一个强大工具，允许我们进行动态图形绘制，非常适合用来展示音频文件的波形。让我们一起...
我们还需要实现一个`drawCircle`方法，使用canvas 2D API绘制环形进度条。这包括设置线条宽度、颜色，以及使用`arc()`方法绘制圆弧，`beginPath()`和`stroke()`完成路径的绘制。 ```javascript // component.js ...
Canvas 是 HTML5 中的一个重要元素，用于创建图形用户界面。它可以用来绘制图形、图像和文字等。Canvas 的绘制区域是一个矩形，通过获取 Canvas 对象的 2D 绘图上下文，可以在其上绘制各种图形。 知识点 2：环形...
本文将详细讲解如何使用HTML5的Canvas API来创建一个环形进度条，并实现动画效果。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，为后续的绘图提供画布： ```html <!DOCTYPE html> <html lang="zh"> ...
例如，绘制一个完整的圆（360度）可以表示100%的进度： ```javascript var percent = 0.8; // 80% 进度 ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2 * percent, false)...
在本文中，我们将深入探讨如何使用HTML5的`canvas`元素来绘制环形进度条。环形进度条是一种常见的UI组件，通常用于显示任务或进程完成的百分比。以下是如何利用`canvas`实现这一功能的详细步骤和相关知识点： 1. **...
标题“自定义环形进度圈，带progress”指的是创建一个可显示进度的环形图形，这通常用于表示某个任务或过程的完成度。这种视图在很多应用中都有应用，比如加载动画、健康应用的运动进度等。 在描述中提到的...
HTML5 Canvas技术是现代网页开发中的一个重要组成部分，它允许开发者在网页上绘制图形，实现动态交互效果。"HTML5 Canvas流体加载动画特效"是一种利用Canvas API创建的视觉吸引人的加载指示器，它以圆形彩色流体环形...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个特定的案例中，“html5 canvas神奇宝贝球Loading加载动画特效”是一个利用HTML5 Canvas元素实现...
onDraw()方法中，利用Canvas和Paint对象，通过arcTo()函数绘制圆弧来表示进度。 2. **属性定制**：为了使组件具有可配置性，开发者可能定义了一些自定义属性，如进度颜色、背景颜色、进度宽度、圆环半径等。这些...
`canvas-arc-draw-master`项目就是一个示例，它展示了如何通过JavaScript操纵canvas绘制动态的环形加载效果。下面将详细讲解相关知识点。 1. **HTML5 Canvas**: HTML5中的canvas是用于图形绘制的二维画布，通过...
本文实例为大家分享了微信小程序绘制半圆进度条的具体代码，供大家参考，具体内容如下 wxml： <canvas canvas-id=canvasProgress xss=removed></canvas> <canvas canvas-id=canvasProgressReal style=...
【标题】"Canvas半圆环进度条动画特效.zip"是一个包含使用HTML5 Canvas技术实现的半圆环形进度条动画效果的代码资源。这个特效在网页设计中常常用于展示数据加载或者进度指示，视觉效果独特且吸引用户注意力。Canvas...
在本文中，我们将深入探讨如何使用Qt的QML模块创建一个圆形进度条动画，特别是实现四分之三圆的进度指示器，同时带有类似于汽车仪表盘的动态效果。Qt是一个跨平台的应用程序开发框架，广泛应用于桌面、移动和嵌入式...
首先，我们需要计算圆的半径，然后创建一个`Paint`对象用于设置渐变颜色。可以使用`Shader`的`LinearGradient`或`SweepGradient`来实现颜色渐变。`LinearGradient`沿指定方向创建线性渐变，`SweepGradient`则沿圆周...