稍微改变 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。第一种方法取自wikipedia，第二种取自here

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);
      }
    }
  }
}