Как лучше сгладить края этой нарисованной дуги ⇐ Javascript

[Anonymous]

Я создаю этот плагин кадра. Похоже, дуга нарисована в порядке, как показано здесь:
< /p>
Но если вы посмотрите осторожно, вы заметите дикие появления по сравнению с этим Idle Frame:

Итак, как я могу сгладить ребра, чтобы соответствовать второму изображению, учитывая этот код:

Код: Выделить всё

function drawFancyArcFrame(mainCtx, opts) {
const {
cx, cy, radius, width, startDeg, sweepDeg,
color1, color2, capStyle = 'feather',
capLengthPx = 24, pixelSize = 4
} = opts;

if (sweepDeg  {
ctx.save();
ctx.translate(x, y);
ctx.rotate(ang);
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0, -width/2);
ctx.lineTo(capLengthPx, 0);
ctx.lineTo(0, width/2);
ctx.closePath();
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fill();
ctx.restore();
};

const erasePixel = (x, y, ang) => {
ctx.save();
ctx.translate(x, y);
ctx.rotate(ang);
ctx.globalCompositeOperation = 'destination-out';
const cols = Math.ceil(capLengthPx / pixelSize);
const rows = Math.ceil(width / pixelSize);
const y0 = -width / 2;
for (let c = 0; c < cols; c++) {
const frac = 1 - (c / cols);
const activeRows = Math.max(1, Math.floor(rows * frac));
const x0 = c * pixelSize;
for (let r = 0; r < activeRows; r++) {
if (Math.random() < 0.85) {
const yCell = y0 + r * pixelSize;
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fillRect(x0, yCell, pixelSize, pixelSize);
}
}
}
ctx.restore();
};

switch (capStyle) {
case 'feather':
eraseFeather(sx, sy, tStart);
eraseFeather(ex, ey, tEnd + Math.PI);
break;
case 'chop':
eraseChop(sx, sy, tStart);
eraseChop(ex, ey, tEnd + Math.PI);
break;
case 'pixel':
erasePixel(sx, sy, tStart);
erasePixel(ex, ey, tEnd + Math.PI);
break;
}

mainCtx.drawImage(off, 0, 0);
}

Я хочу удалить прямые швы, чтобы соответствовать плавному увязчению второго изображения.


Подробнее здесь: https://stackoverflow.com/questions/797 ... -drawn-arc