用canvas作的进度圆形
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
margin: 10px;
width: 194px;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<canvas data-per=‘10‘ width=194 height=194></canvas>
<canvas data-per=‘24‘ width=194 height=194></canvas>
<canvas data-per=‘45‘ width=194 height=194></canvas>
<canvas data-per=‘65‘ width=194 height=194></canvas>
<canvas data-per=‘77‘ width=194 height=194></canvas>
<canvas data-per=‘89‘ width=194 height=194></canvas>
</body>
</html>
<script>
;
(function(window) {
window.addEventListener(‘load‘, per);
function per() {
var aCanvas = document.querySelectorAll(‘canvas‘),
i = 0;
for (; i < aCanvas.length; i++) {
if (aCanvas[i].dataset.per>=0) {
Circle(aCanvas[i])
}
};
function Circle(canvas) {
var canvas = canvas,
context = canvas.getContext(‘2d‘),
//弧形开始位置为-90°，即0.25弧度
num = canvas.dataset.per,
scale = (num / 100 - 0.25);
//渐变 外环
context.beginPath();
context.lineWidth = 14;
var gradiient = context.createLinearGradient(0, 0, 0, 150);
gradiient.addColorStop(0, ‘#e0e0e0‘);
gradiient.addColorStop(1, ‘#f0f0f0‘);
context.strokeStyle = gradiient;
context.arc(97, 97, 90, 0, Math.PI * 2, false);
context.stroke();
//环形 重合底部
context.beginPath();
context.shadowColor = "#aaa";
context.shadowBlur = 2;
context.shadowOffsetX = -1
context.shadowOffsetY = -1
context.strokeStyle = ‘#ccc‘;
context.arc(97, 97, 80, 0, Math.PI * 2, false);
context.lineWidth = 13;
context.stroke()
//渐变 比例
context.beginPath();
context.lineWidth = 13;
var gradiient = context.createLinearGradient(150, 0, 0, 150);
gradiient.addColorStop(0, ‘#ff533a‘);
gradiient.addColorStop(1, ‘#9c1d22‘);
context.strokeStyle = gradiient;
context.arc(97, 97, 80, -Math.PI / 2, scale * Math.PI * 2, false);
context.stroke();
//内圆 阴影
context.beginPath();
context.arc(97, 97, 73, 0, Math.PI * 2);
context.fillStyle = "#fff";
context.shadowColor = "#898989";
context.shadowBlur = 2;
context.shadowOffsetX = -1
context.shadowOffsetY = 2
context.fill();
context.closePath();
//文字
context.beginPath();
context.fillStyle = ‘#d20001‘;
// 上边设置的 阴影影响文字，需要重置文字阴影
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.font = ‘44px 微软雅黑‘;
if (num > 9) {
//单双数，文字位置
context.fillText(num, 64, 115);
} else {
context.fillText(num, 84, 115);
}
context.font = ‘28px 微软雅黑‘;
context.fillText(‘%‘, 114, 115);
context.stroke()
}
}
})(window);
</script>
时间： 2024-10-08 04:37:21