11

Есть такой код на javascript:

function updateGrid()
{
  cntx.strokeStyle = 'white';
  cntx.lineCap = 'butt';
  cntx.lineWidth = 1;
  for(var x = 0; x < canvas.width; x++)
  {
      cntx.beginPath();
      cntx.moveTo(x * cellSize + move.x, move.y);
      cntx.lineTo(x * cellSize + move.x, canvas.width * cellSize+move.y);
      cntx.stroke();  
      cntx.closePath()
  }
}

Предполагается, что он нарисует canvas.width белых линий, толщиной в один пиксель. Но получается то, что на скриншоте:

На каком-то форуме прочитал, что может помочь убирание строчки cntx.beginPath();. Но без неё рисуется что-то еще более странное:

На другом форуме сказали, что ширина линии может быть меньше единицы. На следующей картинке ширина .0, без строки cntx.beginPath();:

А это с ней:

Скажите, как от этого избавиться?

0

2 ответа 2

12

При попытке нарисовать линию шириной в 1px, используя координаты x=(1, 0); y=(1, 3); будет охвачено по 0.5px с каждой стороны линии, в результате чего, она будет иметь ширину 2px.

Это происходит из-за неспособности дисплея отобразить пол-пиксиля.

Given


Для того, чтобы вывести линию шириной в 1px нужно вычислять коориданаты с пол- пикселя, т.е вместо x=(1, 0); y=(1, 3); будет x=(1.5, 0); y=(1.5, 3)

В результате браузер будет рисовать линию охватывая по 0.5px с каждой стороны, тем самым получая линию в 1px.

Result

Пример. Первая линия имеет цвет #ffffff, а вторая #808080. Разница только в координатах.


Различия в цветах происходят из-за сглаживания, которое упомянуто в вопросе.

antialiasing

Когда линия проходит через пол-пикселя, он окрашивается в серый цвет, иначе изображение будет зубчатым. Цвет пикселя выбирается в процессе сглаживания, при котором учитывается гамма. Пиксели будут окрашены в промежуточный цвет между цветом изображения и цветом фона.

Аналогичные действия происходят и в вашем случае.

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


Canvas - Dive Into HTML5

4

Судя по всему, размеры канваса вы задаете через стили, а надо через атрибуты элемента canvas.

<canvas width="100" height="200"></canvas>

В ином случае изображение растягивается из размера по умолчанию.

Еще одна особенность: на экранах retina удвоенное количество точек, поэтому размер для таких экранов нужно уменьшать: в атрибутах ставить, например, width="200", а в стилях width:100px

Добавлю:

Есть еще одна особенность, когда вы рисуете линию она появляется с координатами между двумя пикселями. Поэтому вам нужно либо к вашим координатам прибавлять 0.5:

context.lineTo(x + 0.5, y + 0.5);

Или сделать так:

ctx.translate(0.5, 0.5);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.