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

您可以使用 Canvas 和简单的 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[, counterclockwise]);