0

HTML5 の canvas 要素の CanvasRenderingContext2D クラスに属する arc メソッドを模倣しようとしています。ある程度は機能していますが、頭全体を包み込むことができないようです。

関数のテストを高速化するためにjsfiddle テスト環境を作成しましたので、自由に使用してください。

サークル ストロークをサポートしていないように見えるIvanK ライブラリに移植したいいくつかのプロジェクトでこれを作成しようとしています。

4

2 に答える 2

1

中点円アルゴリズムを使用して、円または円セグメントをピクセルごとに描画できます

于 2012-06-22T02:08:31.367 に答える
0

だから私はこれを理解するのにあまりにも多くの時間を費やしました、そして私はついにそれを得たと思います. やっと思いついた機能です。

arcL = function( x, y, radius, startAngle, endAngle, anticlockwise )
{
    if ( anticlockwise )
    {
        var t = startAngle
        startAngle = endAngle
        endAngle = t
    }

    var d = Math.abs(endAngle - startAngle);
    if ( d >= Math.PI * 2 )
        endAngle = startAngle + Math.PI * 2;
    else
    {
        if ( endAngle < startAngle )
            endAngle += tau
        else
            endAngle = startAngle + d;
    }

    ctx.moveTo( x + radius * Math.cos( startAngle ), y + radius * Math.sin( startAngle) );
    for ( ; startAngle < endAngle; startAngle += 0.02 )
        ctx.lineTo( x + radius * Math.cos( startAngle ), y + radius * Math.sin( startAngle ) );
}

jsfiddle

于 2012-06-22T07:51:09.633 に答える