Имеет ли Canvas различное сглаживание в разных браузерах?

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

Мой код, по сути, является версией этого, предполагая, что X и Y содержат координаты строк:

//this section of code is repeated a large number of times. 

CTX.strokeStyle = 'rgba(0,0,0,0.05)';
CTX.lineWidth = 1 ;


for(var i = 0;i<NUM;i++){
  for(var j = 0;j<NUM,j++){

    if (!F[i*NUM+j]){
      // i and j are not friends
      // and should not have a line between them
      continue;
    }

    var ax = X[i];
    var ay = Y[i];
    var bx = X[j];
    var by = Y[j];

    CTX.beginPath();
    CTX.moveTo(ax,ay);
    CTX.lineTo(bx,by);
    //CTX.closePath(); // not needed. but removing does not fix problem.
    CTX.stroke();
  }
}

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

Вот изображение, которое отображает поведение:

Слева: часть изображения из firefox. Справа: часть изображения из хрома Слева: часть изображения из Firefox. Справа: часть изображения из хрома

Левый пример - это желаемое поведение.

Я предполагаю, что это как-то связано с антиализацией в двух браузерах, но я не могу найти нигде, где обсуждается это поведение. Я только нахожу примеры людей, утверждающих, что вам следует округлять свои координаты до целых чисел, если вам нужна «пиксельная графика», но это несколько другое дело. '

Вопросов:

  1. Вы знаете, почему это происходит?
  2. Можно как-нибудь этого избежать?

Обновить

  1. Вот постоянная ссылка на текущий код: https://bitbucket.org/inconvergent/orbitals_js/src/30f33d11461f4b307fe4a09048bd1b3af4960d31/index.htm

  2. Я написал хром. Оказывается, я действительно использовал хром, когда у меня была эта проблема. в Ubuntu 13.10. Протестирую в хроме на моей машине и отправлю обратно.


person inconvergent    schedule 14.03.2014    source источник
comment
этот (ваш код) выводит мне следующее: i.imgur.com/3zZsxD0.png в Google Chrome 33.0.1750.146 (Official Build 254388) m Windows 7   -  person rlemon    schedule 18.03.2014
comment
Я отредактировал свой вопрос. Оказывается, я действительно использовал хром. Я протестирую его в хроме на своей машине. спасибо за тестирование!   -  person inconvergent    schedule 18.03.2014


Ответы (1)


Canvas - это беспорядок, но есть некоторые решения:

  • # P2 #
    # P3 #
  • Двойная буферизация

  • Субпиксельный рендеринг

  • createPattern


FWIW, there is a workaround to get anti-aliased clipped edges for drawing an image to a canvas.

Instead of this:

ctx.beginPath();
(draw a fancy path)
ctx.clip();
ctx.drawImage(myImage, ...);

Do this:

ctx.fillStyle = ctx.createPattern(image);
ctx.beginPath();
(draw a fancy path)

Ссылки

person Paul Sweatte    schedule 25.04.2014