JavaScript|JavaScript canvas绘制圆形加载进度条 JavaScriptcanvas绘制圆形加载进度

本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码，供大家参考，具体内容如下
1.需求：通过canvas绘制一个圆形的进度条
2.实现思路：
2.1 绘制灰色底框
2.2 创建变量保存结束角度值和加载进度值
2.3 创建定时绘制进度条
2.3.1 修改结束角度
2.3.2 开始新路径绘制
2.3.3 绘制加载圆环
3.实现过程如下：
css样式设置

body {text-align: center; }canvas {background: #ffffff; }

4.html如下：

5.js实现如下：

var circle = document.getElementById("circle"); var ctx = circle.getContext("2d"); //结束角度var end = -90; // 创建变量，进度值1%var load = 0; // 创建定时器，绘制进度条var timer = setInterval(function () {//每次加载前清除画布ctx.clearRect(0, 0, 500, 400); ctx.beginPath(); // 灰色底框ctx.strokeStyle = "#eee"; //底框的背景颜色ctx.lineWidth = 10; //底框的宽度//底框显示的位置想x,y,r,start,endctx.arc(250, 200, 100, 0, 2 * Math.PI); ctx.stroke(); //绘制底框，空心圆// 修改结束角度end += 3.6; // 开始新的路径ctx.beginPath(); // 绘制新的圆环ctx.strokeStyle = "lightgreen"; ctx.lineWidth = 10; //从顶点位置开始ctx.arc(250, 200, 100, -90 * Math.PI / 180, end * Math.PI / 180); ctx.stroke(); // 设置中间的文字字体和大小ctx.font = "18px SimHei"; load++; // 设置图形文字ctx.fillText("已加载完成：" + load + "%", 180, 208); if (load == 100) {clearInterval(timer); }}, 200);

6.实现效果如下：