搜索
首页web前端H5教程详解canvas实现圆弧、圆环进度条的实例方法

下面总结了自己在项目中的圆形进度条效果的实现方式,希望对大家有帮助:

此方法通过canvas绘制圆形的方法来实现动态圆环进度条,直接上代码,疑问请看注释:

HTML代码如下, 在页面里创建一个画布即可:  

<canvas id="canvas" width="300" height="300">
    <p>抱歉,您的浏览器不支持canvas</p>
 </canvas>

JS分两大部分,
第一部分实现整体功能,第二部分调用:
第一部分:
  第一部分功能原理大概是,画两个圆,一个是底色圆,第二个是动态加载的圆弧,进度通过定时器加载;颜色加渐变色;  

 function toCanvas(id ,progress){                canvas进度条
                var canvas = document.getElementById(id),
                ctx = canvas.getContext("2d"),
                percent = progress,  最终百分比                circleX = canvas.width / 2,  中心x坐标                circleY = canvas.height / 2,  中心y坐标                radius = 100, 圆环半径                lineWidth = 5,  圆形线条的宽度                fontSize = 20; 字体大小
                 两端圆点
                function smallcircle1(cx, cy, r) {
                    ctx.beginPath();                    //ctx.moveTo(cx + r, cy);                    ctx.lineWidth = 1;
                    ctx.fillStyle = &#39;#06a8f3&#39;;
                    ctx.arc(cx, cy, r,0,Math.PI*2);
                    ctx.fill();
                }                 function smallcircle2(cx, cy, r) {
                     ctx.beginPath();                     //ctx.moveTo(cx + r, cy);                     ctx.lineWidth = 1;
                     ctx.fillStyle = &#39;#00f8bb&#39;;
                     ctx.arc(cx, cy, r,0,Math.PI*2);
                     ctx.fill();
                 }                 画圆
                 function circle(cx, cy, r) {
                     ctx.beginPath();                     //ctx.moveTo(cx + r, cy);                     ctx.lineWidth = lineWidth;
                     ctx.strokeStyle = &#39;#eee&#39;;
                     ctx.arc(cx, cy, r, Math.PI*2/3, Math.PI * 1/3);
                     ctx.stroke();
                 }                 画弧线
                 function sector(cx, cy, r, startAngle, endAngle, anti) {
                     ctx.beginPath();                     //ctx.moveTo(cx, cy + r); // 从圆形底部开始画                     ctx.lineWidth = lineWidth;                     // 渐变色 - 可自定义
                     var linGrad = ctx.createLinearGradient(
                         circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
                     );
                     linGrad.addColorStop(0.0, &#39;#06a8f3&#39;);                     //linGrad.addColorStop(0.5, &#39;#9bc4eb&#39;);                     linGrad.addColorStop(1.0, &#39;#00f8bb&#39;);
                     ctx.strokeStyle = linGrad;                      圆弧两端的样式                     ctx.lineCap = &#39;round&#39;;                     圆弧                     ctx.arc(
                         cx, cy, r,
                         (Math.PI*2/3),                         (Math.PI*2/3) + endAngle/100 * (Math.PI*5/3),
                         false
                     );
                     ctx.stroke();
                 }                  刷新
                 function loading() {                     if (process >= percent) {
                         clearInterval(circleLoading);
                     }                      清除canvas内容                     ctx.clearRect(0, 0, circleX * 2, circleY * 2);                    中间的字                     ctx.font = fontSize + &#39;px April&#39;;
                     ctx.textAlign = &#39;center&#39;;
                     ctx.textBaseline = &#39;middle&#39;;
                     ctx.fillStyle = &#39;#999&#39;;
                     ctx.fillText(parseFloat(process).toFixed(0) + &#39;%&#39;, circleX, circleY);    
                  
                     圆形                     circle(circleX, circleY, radius);                     
                      圆弧                     sector(circleX, circleY, radius, Math.PI*2/3, process);
                     两端圆点                     smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);
                     smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);                     控制结束时动画的速度
                     if (process / percent > 0.90) {
                         process += 0.30;
                     } else if (process / percent > 0.80) {
                         process += 0.55;
                     } else if (process / percent > 0.70) {
                         process += 0.75;
                     } else {
                         process += 1.0;
                     }
                 }                 var process = 0.0;  进度
                 var circleLoading = window.setInterval(function () {
                     loading();
                 }, 20);
                     
            }
第二部分,调用封装好的代码:
            toCanvas(&#39;canvas&#39;,50);

【相关推荐】

1. Canvas实现圆形进度条并显示数字百分比

2. 利用CSS clip 实现音频播放圆环进度条教程实例

3. 分享h5 canvas圆圈进度条的实例代码

4. H5 canvas实现圆形动态加载进度实例

以上是详解canvas实现圆弧、圆环进度条的实例方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Vue和Canvas:如何实现手写签名和手势识别功能Vue和Canvas:如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas:如何实现手写签名和手势识别功能引言:手写签名和手势识别功能在现代应用程序中越来越常见,它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架,搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能,并给出相应的代码示例。一、手写签名功能实现要实现手写签

Canvas的优势有哪些Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍:1、Canvas提供了丰富的绘图功能,可以绘制各种形状、线条、文本、图像等;2、Canvas在浏览器中直接操作像素,因此具有很高的性能;3、Canvas是基于HTML5标准的一部分,可以在各种现代浏览器上运行等等。

如何利用Vue和Canvas创建逼真的天气动态背景如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言:在现代网页设计中,动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例,你将学习如何编写Vue组件和利用Canvas绘制不同天气场景,从而实现一个独特而吸引人的背景效果。步骤一:创建Vue项目首先,我们需要创建一个Vue项目。

canvas特效有哪些canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍:1、粒子效果,通过控制粒子的位置、速度和颜色等属性来实现各种效果,如烟花、雨滴、星空等;2、线条动画,通过在画布上绘制连续的线条,创建出各种动态的线条效果;3、图片处理,通过对图片进行处理,可以实现各种炫酷的效果,如图片切换、图片特效等;4、文字动画等等特性。

canvas插件有哪些canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍:1、Fabric.js 是一个基于Canvas的开源 JavaScript 库,它提供了一些强大的功能;2、EaselJS是CreateJS库中的一个模块,它提供了一套简化了Canvas编程的API;3、Konva.js等等。

canvas引擎有哪些canvas引擎有哪些Aug 17, 2023 pm 05:29 PM

canvas引擎有Three.js、Pixi.js、EaselJS、Konva.js、Paper.js等。详细介绍:1、Pixi.js,提供了简单易用的API,支持精灵、纹理、滤镜等功能,同时还提供了丰富的工具和插件,方便开发者进行交互、动画和优化等操作;2、Pixi.js,提供了简单易用的API,支持精灵、纹理、滤镜等功能,还提供了丰富的工具和插件;3、EaselJS等等。

Vue和Canvas:如何实现图片的马赛克效果Vue和Canvas:如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas:如何实现图片的马赛克效果引言:随着Web技术的不断发展,越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中,常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果,为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理,使得整个图像变得模糊和抽象

Vue和Canvas:如何实现视频播放器的定制化界面Vue和Canvas:如何实现视频播放器的定制化界面Jul 18, 2023 pm 02:49 PM

Vue和Canvas:如何实现视频播放器的定制化界面引言:在现代互联网时代,视频已经成为人们生活中必不可少的一部分。为了提供良好的用户体验,许多网站和应用程序都提供了自定义的视频播放器界面。本文将介绍如何使用Vue和Canvas技术实现一个定制化的视频播放器界面。一、前期准备在开始之前,您需要确保您已经安装了Vue和Canvas,并且熟悉这两种技术的基本用法

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器