CSS 圆弧的末端

Question

我正在尝试围绕 CSS 样式的文本绘制一个动画弧，它看起来像一个圆形图标。

由于它可以是弧形或圆形（因为里面的圆形图标会隐藏它的内部部分），因此有几种仅使用 CSS 的解决方案，例如this或this。

但我希望这条线的末端是圆形的。像这样的东西：

我不确定这是否可能。有任何想法吗？

Answer 1

这是一种用动画绘制它的画布方式。一个关键部分是能够使用以下方法将生产线的端盖变圆context.lineCap = "round";：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2
var radius = 50;
var startAngle = (Math.PI / 180) * -90
var endAngle = 180
context.lineWidth = 15;
context.lineCap = "round";
var ctr = -90;
var clr = setInterval(function () {
    context.clearRect(0, 0, 300, 150); // clear canvas
    context.beginPath();
    context.arc(x, y, radius, startAngle, (Math.PI / 180) * ctr, false);
    context.stroke();
    ctr++;
    if (ctr == endAngle) clearInterval(clr)
}, 10)

canvas {
    border:1px solid #999;
}

<canvas id="myCanvas" width="300" height="150"></canvas>