1

この効果に名前があるかどうかはわかりませんが、基本的には円弧が増えて最終的に円になります。

この画像があなたにアイデアを与えることを願っています。 ここに画像の説明を入力

基本的に、JavaScript で変更できる長さの円弧を作成する必要があります (同じ半径を維持します)。私は本当にdivとborder radiusでこれをやりたいと思っています(幅、高さ、左、上、border-radiusで遊んでいます.

したがって、(1) のように 90 度の円弧を実現するには、次のようにします。

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

それでも、円弧は単一のピクセルから始まり、(1)、(2)、(3)、そして最後に完全な円になります。私が抱えている問題の 1 つは、境界線が堅固な境界線ではなく、次のようなものであることです。

ここに画像の説明を入力

境界線は弧の端に向かって色の強さを失います。これが、修正方法がわからない最初の問題です。第二に、指定されたサイズと半径で円弧を作成するのに役立つ、サイズ、位置、境界半径を操作するアルゴリズムを知っていますか?

4

1 に答える 1

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 座標、y 座標、半径、開始角度、終了角度[、反時計回り]);

于 2013-08-28T19:17:20.640 に答える