


The following summarizes how to achieve the circular progress bar effect in my project. I hope it will be helpful to everyone:
This method draws a circle through canvas To realize the dynamic ring progress bar using the shape method, enter the code directly. If you have any questions, please see the comments:
The HTML code is as follows. Just create a canvas on the page:
<canvas id="canvas" width="300" height="300"> <p>抱歉,您的浏览器不支持canvas</p> </canvas>
JS is divided into two parts,
The first part implements the overall function, and the second part calls:
The first part:
The functional principle of the first part is roughly to draw two circles, one is the background color Circle, the second one is a dynamically loaded arc, the progress is loaded through timer; the color is added with gradient color;
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 = '#06a8f3'; 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 = '#00f8bb'; 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 = '#eee'; 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, '#06a8f3'); //linGrad.addColorStop(0.5, '#9bc4eb'); linGrad.addColorStop(1.0, '#00f8bb'); ctx.strokeStyle = linGrad; 圆弧两端的样式 ctx.lineCap = 'round'; 圆弧 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 + 'px April'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#999'; ctx.fillText(parseFloat(process).toFixed(0) + '%', 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('canvas',50);
[Related recommendations]
1. Canvas implements a circular progress bar and displays a digital percentage
2. Use CSS clip to implement an audio playback circular progress bar tutorial example
3. Share the example code of h5 canvas circle progress bar
4. H5 canvas realizes the example of circular dynamic loading progress
The above is the detailed content of Detailed explanation of the example method of realizing arc and ring progress bars on canvas. For more information, please follow other related articles on the PHP Chinese website!

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

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

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

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

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

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等等。

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

canvas框架有Fabric.js框架、Konva.js框架、EaselJS框架、Paper.js框架、Three.js框架等。详细介绍:1、Fabric.js框架,支持图形的选择、缩放、旋转、拖拽等操作,并且可以导出为图片或SVG格式;2、Konva.js框架,支持图形的层级管理、变换操作、事件监听等功能,适用于创建交互式的图形应用程序;3、EaselJS框架等等。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
