Я пишу сценарий 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. Справа: часть изображения из хрома
Левый пример - это желаемое поведение.
Я предполагаю, что это как-то связано с антиализацией в двух браузерах, но я не могу найти нигде, где обсуждается это поведение. Я только нахожу примеры людей, утверждающих, что вам следует округлять свои координаты до целых чисел, если вам нужна «пиксельная графика», но это несколько другое дело. '
Вопросов:
- Вы знаете, почему это происходит?
- Можно как-нибудь этого избежать?
Обновить
Вот постоянная ссылка на текущий код: https://bitbucket.org/inconvergent/orbitals_js/src/30f33d11461f4b307fe4a09048bd1b3af4960d31/index.htm
Я написал хром. Оказывается, я действительно использовал хром, когда у меня была эта проблема. в Ubuntu 13.10. Протестирую в хроме на моей машине и отправлю обратно.
Google Chrome 33.0.1750.146 (Official Build 254388) m
Windows 7 - person rlemon   schedule 18.03.2014