javascript - 在 HTML5 Canvas 中绘制和填充非抗锯齿圆圈的最快方法

Question

我需要在 HTML5Canvas 中为基本绘图应用程序绘制和填充一个非抗锯齿圆，因为填充桶工具算法不能很好地填充抗锯齿形状边框。

我把这个页面的javascript算法拿走了https://en.wikipedia.org/wiki/Midpoint_circle_algorithm并实现它来绘制实心圆，但速度非常慢。

canvas = document.getElementById("canvas");
const CHANNELS_PER_PIXEL = 4; //rgba

function drawCircle (x0, y0, radius, canvas) {
var x = radius-1;
var y = 0;
var dx = 1;
var dy = 1;
var decisionOver2 = dx - (radius << 1);   // Decision criterion divided by 2 evaluated at x=r, y=0
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var context = canvas.getContext('2d');
var imageData = context.getImageData(0, 0, imageWidth, imageHeight);
var pixelData = imageData.data;
var makePixelIndexer = function (width) {
    return function (i, j) {
        var index = CHANNELS_PER_PIXEL * (j * width + i);
        //index points to the Red channel of pixel 
        //at column i and row j calculated from top left
        return index;
    };
};
var pixelIndexer = makePixelIndexer(imageWidth);
var drawPixel = function (x, y) {
    var idx = pixelIndexer(x,y);
    pixelData[idx] = 152;   //red
    pixelData[idx + 1] = 152; //green
    pixelData[idx + 2] = 152;//blue
    pixelData[idx + 3] = 255;//alpha
};

while (x >= y) {

    if(x0 + x>=0){drawPixel(x0 + x, y0 + y);}
    if(x0 + y>=0){drawPixel(x0 + y, y0 + x);}
    if(x0 - x>=0){drawPixel(x0 - x, y0 + y);} 
    if(x0 - y>=0){drawPixel(x0 - y, y0 + x);} 
    if(x0 - x>=0){drawPixel(x0 - x, y0 - y);}
    if(x0 - y>=0){drawPixel(x0 - y, y0 - x);}
    if(x0 + x>=0){drawPixel(x0 + x, y0 - y);}
    if(x0 + y>=0){drawPixel(x0 + y, y0 - x);}

    //fill circle code
    var x1=x0-x;
    var x2=x0+x;
    var xx=x2-x1;

        for(i=x2-x1;i>0; i--){
            if((x1+(xx-i))>=0){
            drawPixel(x1+(xx-i),y0+y);
            }
        }

    var x1=x0-y;
    var x2=x0+y;
    var xx=x2-x1;

        for(i=x2-x1;i>0; i--){
            if((x1+(xx-i))>=0){
            drawPixel(x1+(xx-i),y0+x);
            }
        }

    var x1=x0-x;
    var x2=x0+x;
    var xx=x2-x1;

        for(i=x2-x1;i>0; i--){
            if((x1+(xx-i))>=0){
            drawPixel(x1+(xx-i),y0-y);
            }
        }

    var x1=x0-y;
    var x2=x0+y;
    var xx=x2-x1;

        for(i=x2-x1;i>0; i--){
            if((x1+(xx-i))>=0){
            drawPixel(x1+(xx-i),y0-x);
            }
        }
    //fill end

    if (decisionOver2 <= 0) 
    {
        y++;
        decisionOver2 += dy; // Change in decision criterion for y -> y+1
        dy += 2;
    } 
    if (decisionOver2 > 0)
    {
        x--;
        dx += 2;
        decisionOver2 += (-radius << 1) + dx; // Change for y -> y+1, x -> x-1
    }
}

context.putImageData(imageData, 0, 0);
}

此外，

context.translate(0.5, 0.5);

和

context.imageSmoothingEnabled = !1;

不要为一个圈子工作。

你有更好的功能或者你知道如何压缩和连接这个圆圈算法吗？

谢谢

Answer 1

我做了这个 Breseham 圆算法的修改版本来填充“别名”的圆，前一段时间是为了一个“复古”项目。

修改是从 8 个切片中获取值并将它们转换为 4 行。我们可以使用 rect() 创建一条线，但必须将绝对 (x2,y2) 坐标转换为宽度和高度。

该方法只是将 rect 添加到路径中，速度非常快，您不必通过缓慢的 getImageData()/putImageData ()(并且不会受到 CORS 问题的影响)。最后调用一个填充操作。这意味着您也可以直接在 Canvas 上使用它，而无需担心大多数情况下的现有内容。

重要的是平移值和给定值是整数值，并且半径 > 0。

要强制使用整数值，只需将值移动 0:

xc = xc|0;  // you can add these to the function below
yc = yc|0;
r  = r|0;

(如果你想制作轮廓(“描边”)版本，你必须使用所有 8 个切片的位置并将 rect() 的宽度更改为 1。)

演示

var ctx = c.getContext("2d");
ctx.fillStyle = "#09f";
aliasedCircle(ctx, 200, 200, 180);
ctx.fill();
  
function aliasedCircle(ctx, xc, yc, r) {  // NOTE: for fill only!
  var x = r, y = 0, cd = 0;

  // middle line
  ctx.rect(xc - x, yc, r<<1, 1);

  while (x > y) {
    cd -= (--x) - (++y);
    if (cd < 0) cd += x++;
    ctx.rect(xc - y, yc - x, y<<1, 1);    // upper 1/4
    ctx.rect(xc - x, yc - y, x<<1, 1);    // upper 2/4
    ctx.rect(xc - x, yc + y, x<<1, 1);    // lower 3/4
    ctx.rect(xc - y, yc + x, y<<1, 1);    // lower 4/4
  }
}

<canvas id=c width=400 height=400></canvas>

放大演示:

var ctx = c.getContext("2d");
ctx.scale(4,4);
ctx.fillStyle = "#09f";
aliasedCircle(ctx, 50, 50, 45);
ctx.fill();

ctx.font = "6px sans-serif";
ctx.fillText("4x", 2, 8);

function aliasedCircle(ctx, xc, yc, r) {
  var x = r, y = 0, cd = 0;

  // middle line
  ctx.rect(xc - x, yc, r<<1, 1);

  while (x > y) {
    cd -= (--x) - (++y);
    if (cd < 0) cd += x++;
    ctx.rect(xc - y, yc - x, y<<1, 1);  // upper 1/4
    ctx.rect(xc - x, yc - y, x<<1, 1);  // upper 2/4
    ctx.rect(xc - x, yc + y, x<<1, 1);  // lower 3/4
    ctx.rect(xc - y, yc + x, y<<1, 1);  // lower 4/4
  }
}

<canvas id=c width=400 height=400></canvas>