2016-11-06 3 views
3


HTML5 Холст, кажется, рисует несовершенные шары на определенных условиях. Когда есть красный фон и синий круг с черным контуром, кажется, что контур шире в левой части и тоньше справа. Вот сценарий, иллюстрирующий это: https://jsfiddle.net/omgszg38/4/. Разве вам это тоже не кажется?
Вот код, который рисует мяч:Несовершенный мяч на холсте HTML5

d.beginPath(); 
d.fillStyle = "blue"; 
d.arc(x,y,radius,0,Math.PI*2,false); 
d.fill(); 

d.lineWidth = 1; //Ball stroke 

d.beginPath(); 
d.arc(x,y,radius,0,Math.PI*2,false); 
d.stroke(); 

Примечание: Я уже просил помощи об этом в другом форуме, и вот это, если вам нужно больше информации: http://www.webdeveloper.com/forum/showthread.php?359393-Imperfect-Ball-drawing-on-HTML5-Canvas

+0

Когда я изначально смотрел на него, мне показалось, что он был тоньше на дне, чем сверху, - но масштабирование появилось в порядке. Проведя некоторое время, пытаясь понять, является ли это оптической иллюзией, я понял, что если вы повернете голову влево, то внутренний круг, кажется, движется вправо и наоборот ... создается впечатление, что оно тоньше с одной стороны, чем Другие. Похоже, что это не что иное, как оптическая иллюзия. – David

+1

Возможно, из-за подпиксельной рендеринга. На несвязанной ноте вам не нужно рисовать круг дважды https://jsfiddle.net/ym5a5fdd/ –

+0

Есть ли увеличительное стекло? Попробуйте подсчитать пиксели с ним или невооруженным глазом. – Benur21

ответ

1

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

+0

Поверните голову (или экран). Почему он еще шире справа и тоньше слева? Центрируйте мяч на холсте, если вам нужно. – Benur21

+0

Также проблема может быть больше при заполнении(), чем в штрихе. Если вы удалите заполнение, граница будет четной. – Derek

+1

Chromostereopsis: http://luminanze.com/writings/chromostereopsis_in_ux_design.html –

Смежные вопросы