使用 html / css / js / jquery / angularjs 围绕图像的部分弧线答案

【问题标题】：Partial Arc around an image with html / css / js / jquery / angularjs使用 html / css / js / jquery / angularjs 围绕图像的部分弧线
【发布时间】：2017-11-16 13:17:12
【问题描述】：

我想在图像周围有一个部分弧线，随着时间的推移弧线越来越小：

有什么想法吗？谢谢

更新

在 cmets 中看到人们坚持要介绍我自己为实现这一目标所做的努力后，这是我编写的代码，但这不是我想要的样子： HTML：

<div style="position:relative;">
<img style="position:absolute; width:100px; height:100px; border-radius:50%;left:50px;top:50px;" src="http://iv1.lisimg.com/image/522888/408full-adriana-lima.jpg" />
<canvas id="myCanvas" style="background-color:red;" width="500" height="500"></canvas>

JS：

var imgSurrounder = function () {


                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                ctx.beginPath();
                ctx.arc(100, 100, 50, 0, 2 * Math.PI);
                ctx.lineWidth = 30;
                ctx.strokeStyle = "#000";
                ctx.stroke();

                ctx.lineWidth = 40;


                var j = 0;
                var i = 0;
                var num = 50;
                var s = 0;
                var step = 2 * Math.PI / num;
                var e = (i + 1) * step;

                var drawStroke = function () {
                    //console.log(j++);
                    ctx.beginPath();
                    ctx.arc(100, 100, 50, s, e);
                    ctx.strokeStyle = "#fff";
                    ctx.stroke();
                    i++;
                    if (i === num) {
                        return;
                    }
                    s = e - 0.5 * step;
                    e = (i + 1) * step;
                    setTimeout(drawStroke, 1000);
                }
                setTimeout(drawStroke, 10);
            }
        },

结果是：

但是你可以看到它不是那么干净整洁。此外，如果这样的个人资料图像彼此紧密分布，则矩形画布不太方便绘制。我觉得我没有以正确的方式进行操作，并且有更好的方法。

但我不知道我是否真的应该在问题中写下所有这些东西，因为我担心人们不会阅读它，因为它太长了，然后我会因为我有几个问题而无法回答问题。因此，我觉得为了不让我的问题变得肮脏并保持它的清洁和重点，在这里展示我所有的试验根本不相关。

再一次，如果这些是她的规则，那么我当然尊重它。还是谢谢

【问题讨论】：

Stack Overflow 您应该尝试自己编写代码。在 doing more research 之后，如果您有问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供Minimal, Complete, and Verifiable example。我建议阅读How to Ask 一个好问题和the perfect question。另外，请务必使用tour 并阅读this。
但我真的不知道......我应该以某种方式使用图像的边框吗？我没有任何线索..我尝试在画布上绘图，但看起来不太好
你为什么不试着熟悉一下 SO 的规则。如果你这样做，你就不会发布这样的问题，然后你就不会被否决
好吧，伙计们，听我说，我知道如何发布问题并编写自己的代码，好吗？这是一个例子：stackoverflow.com/questions/41419811/… 但是在这个我真的没有任何线索，所以不是简单地否决我的问题，这样我就不会得到任何答案，我认为这里有更好的人确实有明确的答案或参考罚款？我一直在谷歌上搜索，但我没有找到任何使它像这些图像中的东西。请，
搜索互联网接收，使用css动画：codepen.io/kyledws/pen/Gvelt

标签： javascript jquery html css angularjs

【解决方案1】：

好的，我发现这正是我要找的东西：

HTML：

<div class="container">
<div id="activeBorder" class="active-border">
    <div id="circle" class="circle">
        <span id="startDeg" class="0"></span>
    </div>
</div>

JS：

     var draw = function (prec) {
                    $(function drawSector() {
                        var activeBorder = $("#activeBorder");
                        if (prec > 100)


                 prec = 100;
                    var deg = prec * 3.6;
                    if (deg <= 180) {
                        activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
                    }
                    else {
                        activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
                    }

                    var startDeg = $("#startDeg").attr("class");
                    activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
                    $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
                });
            }
            var count = 0;
            setInterval(function () {
                draw(count++);
            }, 100);

参考： http://jsfiddle.net/wun8T/1/

【讨论】：