本文展示了如何使用HTML5的canvas元素绘制圆环形进度条。通过JavaScript函数drawRing，创建了两个同心圆环，外环固定灰色，内环颜色根据给定的百分比变化。此外，还在圆环中心添加了百分比文字展示。
圆环进度表示是现在常用的一种进度标识方法，在此特意记录一下以便后续修改使用，此例仅供参考！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制圆环进度条</title>
</head>
<body>
<div>
<canvas id="myCanvas"></canvas>
</div>
<script type="text/javascript">
function drawRing(w,h,val){
//先创建一个canvas画布对象，设置宽高
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.canvas.width=w;
ctx.canvas.height=h;
//圆环有两部分组成，底部灰色完整的环，根据百分比变化的环
//先绘制底部完整的环
//起始一条路径
ctx.beginPath();
//设置当前线条的宽度
ctx.lineWidth=10;//10px
//设置笔触的颜色
ctx.strokeStyle='#CCCCCC';
//arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)
ctx.arc(50,50,40,0,2*Math.PI);
//绘制已定义的路径
ctx.stroke();
//绘制根据百分比变动的环
ctx.b
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
