3

我正在尝试在画布上画一个圆圈，它的生成方式如下：

效果怪异的圆圈，并放大： 在此处输入图像描述

我不确定为什么会发生这种情况，尽管我之前已经看到过效果并且我怀疑这与部分像素有关（尽管我没有这样做）。在这个jsfiddle可以看到一个工作示例。

总结一下代码，我正在使用一个函数来绘制圆圈。我逐渐向内绘制内部和外部边缘，同时调整 alpha。代码如下：

function drawCircle(x, y, radius, startAngle, endAngle, antiClockwise, lineWidth, r, g, b, a) {
    c.beginPath(); 

    var w = Math.abs(lineWidth / 2);

    var alphaFactor = a / w;
    var alpha = alphaFactor;

    var outer = radius + w;
    var inner = radius - w;

    // draw centre line
    c.lineWidth = 1;
    c.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    c.arc(x, y, radius, startAngle, endAngle, true); 
    c.stroke();

    for(i = 0; i < w; i++, inner++, outer--, alpha += alphaFactor) {
        // draw inner
        c.beginPath(); 
        c.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
        c.arc(x, y, inner, startAngle, endAngle, true); 
        c.stroke();

        // draw outer
        c.beginPath(); 
        c.arc(x, y, outer, startAngle, endAngle, true); 
        c.stroke();
    }
};

我相信我可以使用径向渐变来解决这个问题（我认为会更快，具体取决于线的宽度），但是我想了解为什么会出现上面显示的影响。

4

2 回答 2

1

我想这是由于非直线（一个圆圈包含很多）的抗锯齿/圆角效果。特别是，线宽（非常）小。我的猜测是，这会导致部分重叠的圆线，部分彼此相邻的线，甚至可能在某些地方留下间隙的线......

这个问题似乎通过增加线宽来解决：

c.lineWidth = 1.4;

请参阅更新的jsFiddle 演示。

于 2013-01-16T09:46:04.300 回答
0

我通过不绘制单条线而仅绘制一条带有径向渐变的线来解决问题，从而重现了我正在寻找的效果：

在此处输入图像描述

这似乎（afaict）效率更高，因为它只使用一个填充，而不是多个笔画。

可以在这个JSFiddle看到解决方案，而代码非常小：

$(function () {
  draw(document.getElementById('canvas').getContext('2d'));

  function draw(ctx) {
    var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60);
    radgrad.addColorStop(0.8, 'rgba(255,0,0,0)');
    radgrad.addColorStop(0.85, 'rgba(255,0,0,.6)');
    radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');
    radgrad.addColorStop(0.95, 'rgba(255,0,0,.6)');
    radgrad.addColorStop(1, 'rgba(255,0,0,0)');

    ctx.fillStyle = radgrad;
    ctx.arc(60, 60, 60, 0, 2 * Math.PI, true);
    ctx.fill();
  }
});

我从另一个问题的解决方案中得出我的解决方案。

于 2013-01-16T11:01:45.757 回答