Question

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

我制作了一个jsfiddle test environment来让测试功能变得更快，所以请随意使用它。

我正在尝试为我想要移植到IvanK library的一些项目进行此操作，这似乎不支持圆形笔划。

Answer 1

您可以使用midpoint circle algorithm逐个像素地绘制圆圈或圆圈

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

我如何模仿CanvasRenderingContext2D的arc方法？ - 使用Javascript

2 个答案: