Drawing фантазии Круг на холсте имеет странный эффект

Question

Я пытаюсь нарисовать круг на холсте, и это генерирующий следующим образом:

и масштаб изображения:

я не уверен, почему это хотя я видел эффект раньше, и я подозреваю, что это что-то связано с частичными пикселями (хотя я не делаю этого афайта). Рабочий пример можно увидеть на этом jsfiddle.

Чтобы обобщить код, я использую функцию для рисования круга. Я рисую внутри и снаружи постепенно внутрь, настраивая альфу, когда я иду. Код можно увидеть ниже:

function drawCircle(x, y, radius, startAngle, endAngle, antiClockwise, lineWidth, r, g, b, a) { 
    c.beginPath(); 

    var w = Math.abs(lineWidth/2); 

    var alphaFactor = a/w; 
    var alpha = alphaFactor; 

    var outer = radius + w; 
    var inner = radius - w; 

    // draw centre line 
    c.lineWidth = 1; 
    c.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; 
    c.arc(x, y, radius, startAngle, endAngle, true); 
    c.stroke(); 

    for(i = 0; i < w; i++, inner++, outer--, alpha += alphaFactor) { 
     // draw inner 
     c.beginPath(); 
     c.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')'; 
     c.arc(x, y, inner, startAngle, endAngle, true); 
     c.stroke(); 

     // draw outer 
     c.beginPath(); 
     c.arc(x, y, outer, startAngle, endAngle, true); 
     c.stroke(); 
    } 
}; 

Я считаю, что я могу использовать радиальный градиент, чтобы решить эту проблему (который я предполагаю, будет быстрее, в зависимости от ширины линии), однако я хотел бы понять, почему проявляется аффект, показанный выше.

Answer 1

Я исправил эту проблему, не опираясь отдельных линий и просто рисовать одну линию с радиальным градиентом, который воссоздан эффект Я ищу:

Это появляется (AFAICT), чтобы быть намного больше так как он использует только одну заливку, а не несколько штрихов.

Раствор можно увидеть на этом JSFiddle, в то время как код достаточно мал:

$(function() { 
    draw(document.getElementById('canvas').getContext('2d')); 

    function draw(ctx) { 
    var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60); 
    radgrad.addColorStop(0.8, 'rgba(255,0,0,0)'); 
    radgrad.addColorStop(0.85, 'rgba(255,0,0,.6)'); 
    radgrad.addColorStop(0.9, 'rgba(255,0,0,1)'); 
    radgrad.addColorStop(0.95, 'rgba(255,0,0,.6)'); 
    radgrad.addColorStop(1, 'rgba(255,0,0,0)'); 

    ctx.fillStyle = radgrad; 
    ctx.arc(60, 60, 60, 0, 2 * Math.PI, true); 
    ctx.fill(); 
    } 
}); 

Я полученный мое решение от решения другой question.

Answer 2

Я предполагаю, что это связано с эффектами сглаживания/округления непрямых линий (в которых круг содержит много). Особенно, с (очень) малой шириной линии. Я предполагаю, что это приводит к частично перекрывающимся круговым линиям, линиям, расположенным частично рядом друг с другом, и, возможно, даже линиям, которые оставляют зазор в некоторых местах ...

Проблема, по-видимому, связана с увеличением ширина линии:

c.lineWidth = 1.4; 

Просмотреть обновленный jsFiddle demo.