Question

我画一个弧并假装这是旋转的。如果电弧很小就可以了！但是当我增加它会产生波浪效果。如果你注意，你可以看到起伏效应。

是否有可能纠正这个问题？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var zoom = 5;
var i = 0;
var px = canvas.width/2;
var py = canvas.height/2;
var radio = 80*zoom;
var startSegment, endSegment;

function draw(){
    window.requestAnimFrame(draw);
    ctx.clearRect(0,0,canvas.width,canvas.height);

    startSegment = i*Math.PI;
    endSegment = (i+1.5)*Math.PI;
    i = i + 0.01;

    ctx.beginPath();
    ctx.strokeStyle = '#99FF00';
    ctx.lineWidth = 2;
    ctx.arc(px,py,radio,startSegment,endSegment);
    ctx.stroke();
}


draw();

Answer 1

这显然是一个浏览器问题（~~，应该报告给Chromium团队~~ Reported here和here。感谢@ ferow2k和@GameAlchemist的链接。）< / p>

要解决这个问题，你可以制作自己的弧克隆：

function arc(ctx, x, y, radius, sa, ea) {

    var step = 0.01,
        a = sa + step;

        ctx.moveTo(x + radius * Math.cos(sa),
                   y + radius * Math.sin(sa));

    for(; a < ea; a+=step) {
        ctx.lineTo(x + radius * Math.cos(a),
                   y + radius * Math.sin(a));
    }
}

然后将其用作：

//ctx.arc(px,py,radio,startSegment,endSegment);
arc(ctx, px,py,radio,startSegment,endSegment);

可以使用圆周长度公式（Øxπ）动态计算步长值（以避免太多重叠）：

var steps = radius * Math.PI * 0.25,
    step = Math.PI / steps;

我没有为它提供逆时针选项，但是如果你需要它，你应该能够以此作为基础。

它当然不会像内置弧那样高效（但也不错）。如果您打算将其绘制得更大，则可能必须调整步长值以获得更精细的弧度。至少它会让你绕过摇晃的弧线。

FIDDLE 和 FIDDLE (using dynamic step)

在画布上旋转弧形的丑陋效果

1 个答案: