javascript - 使用 HTML、CSS 和 JavaScript 增加弧线效果

Question

我不知道这个效果是否有名字，但基本上是一个增加并最终变成一个圆圈的弧。

我希望这张图片能给你一个想法。

基本上我需要创建一个弧，我可以通过 JavaScript 改变它的长度（保持相同的半径）。我真的很想尝试使用 div 和边框半径（使用宽度、高度、左侧、顶部、边框半径。

所以，为了实现像（1）中那样的 90 度弧，我会使用这个：

-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;

然而，弧将从单个像素开始，然后增加将变为（1），然后是（2），（3），最后是一个完整的圆。我遇到的问题之一是边框不是刚性实心边框，而是这样的：

边框在弧的末端失去了颜色强度，这将是我不知道如何解决的第一个问题。其次，您是否知道一些算法可以使用大小、位置和边界半径来帮助您创建具有指定大小和半径的弧？

Answer 1

您可以使用画布和简单的 JS 轻松完成此操作。

JS

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
//ctx.arc(100,75,50,0,2*Math.PI); //Full circle
//ctx.arc(100,75,50,0,1.5*Math.PI); //3/4 circle
//ctx.arc(100,75,50,0,Math.PI); //Half circle
ctx.arc(100,75,50,0,0.5*Math.PI); //1/4 circle
ctx.stroke();

HTML

<canvas id="canvas"></canvas>

JSFiddle：http: //jsfiddle.net/r3CSS/

.arc 的语法是： .arc(x-coordinate , y-coordinate , radius, start Angle, end Angle[,逆时针]);