布雷森汉姆圆算法是否可以避免过度绘制？

Question

我使用Bresenham的圆算法。 但是我注意到，通过运行下面的代码，您会自己看到，该算法有时会绘制同一像素多次。

我通常要做的是解析所有前坐标，以检查是否尚未绘制，以避免在同一位置绘制两次。 这可行，但我知道这会使整个过程变慢。

完成此操作后，当我使用drawLine(x1, y1, x2, y2)函数而不是putPixel(x, y)填充我的圈子时，我也会遇到另一个问题。有时顶部和底部在相同的y坐标处具有3条宽度不同的线。例如，我得到了第一行的顶部坐标

  

（20，10，24，10）

然后第二行

  

（21，10，23，10）

第三个

  

（22、10、22、10）（一个简单像素）

有什么线索可以解决这些问题吗？

function circleBres(xc,  yc, r)
{
    var x = 0, y = r;
    var d = 3 - 2 * r;
    var coords = [];
    while (y >= x)
    {
        coords = drawCircle(xc, yc, x, y, coords);
        x++;
        if (d > 0)
        {
            y--; 
            d = d + 4 * (x - y) + 10;
        }
        else
            d = d + 4 * x + 6;
    }
    nbOccurs(coords);
}

function drawCircle(xc, yc, x, y, coords)
{
    coords = addCoords(xc+x, yc+y, coords);
    coords = addCoords(xc-x, yc+y, coords);
    coords = addCoords(xc+x, yc-y, coords);
    coords = addCoords(xc-x, yc-y, coords);
    coords = addCoords(xc+y, yc+x, coords);
    coords = addCoords(xc-y, yc+x, coords);
    coords = addCoords(xc+y, yc-x, coords);
    coords = addCoords(xc-y, yc-x, coords);
    return (coords)
}

function addCoords(x, y, coords)
{
	coords.push({x:x, y:y, parsed: false});
	return (coords)
}

function nbOccurs(coords)
{
	var i = 0
  var results = [];
	while(i < coords.length)
  {
  	var nbOccur = 1;
  	var j = 0;
    while (j < coords.length)
    {
    	while (coords[j].parsed && j < coords.length - 1)
      	j++;
   		if (coords[i].x === coords[j].x && coords[i].y && coords[j].y)
      {
      	nbOccur++;
        coords[j].parsed = true;
      }
      j++;
    }
    
    if (nbOccur == 1)
      console.log("x:" + coords[i].x + " " + "y:" + coords[i].y + " is drawn " + nbOccur + " time");
    else
          console.log("x:" + coords[i].x + " " + "y:" + coords[i].y + " is drawn " + nbOccur + " times");
    i++;
  }
}

circleBres(50,  50, 25);