javascript - 我将如何模仿 CanvasRenderingContext2D 的 arc 方法？- Javascript

Question

我一直在尝试为 HTML5 的 canvas 元素模仿属于 CanvasRenderingContext2D 类的 arc 方法。我有一些工作，但我似乎无法围绕整个事情。

我做了一个jsfiddle 测试环境，让测试功能更快，所以请随意使用。

我正在尝试为我想要移植到IvanK 库的一些项目制作这个，它似乎不支持圆形笔划。

Answer 1

可以使用中点圆算法逐像素画圆或圆段

Answer 2

所以我花了太多时间试图弄清楚这一点，我想我终于明白了。这是我最终想出的功能。

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