javascript - 稍微改变 Bresenham/midpoint circle 算法以获得更好的结果

Question

我确实有两种方法可以通过 bresenham/midpoint 算法创建一个实心圆。但是第二种方式看起来比第一种方式好得多。

我想创建一个像第二个一样的结果，但使用第一个的方式。我想用第一种方法来做，因为我需要一个正确的公式来计算距离，目前是这个：

function calcDistance (pos,pos2,range){
    var x1 = pos.hasOwnProperty('x') ? pos.x : pos[0],
        y1 = pos.hasOwnProperty('y') ? pos.y : pos[1],
        x2 = pos2.hasOwnProperty('x') ? pos2.x : pos2[0],
        y2 = pos2.hasOwnProperty('y') ? pos2.y : pos2[1];
    return Math.pow((x1-x2),2) + Math.pow((y1-y2),2) - Math.pow(range, 2)
};

这是jsfiddle。第一种方法取自维基百科，第二种方法来自这里

Answer 1

不是在距离为 时绘制点，而是在距离为<= 0时绘制点<= radius*radius*zoom：

编辑：应用比例因子(8.0/radius)

function drawCircle(x0, y0, radius){
  var range = radius*radius*zoom*(8.0/radius);    // calculate the range once
  for(var x = 0; x < imageWidth/zoom; x++){
    for(var y = 0; y < imageHeight/zoom; y++){
      if(calcDistance([x0,y0],[x*zoom,y*zoom],radius*zoom) <= range){
        context.fillRect(x*zoom,y*zoom,zoom,zoom);
      }
    }
  }
}