Как удалить сглаживание на элементе Canvas?
1,00
р.
Есть такой код на 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() :
А это с ней:
Скажите, как от этого избавиться?
Ответ
При попытке нарисовать линию шириной в 1px, используя координаты x=(1, 0) y=(1, 3) будет охвачено по 0.5px с каждой стороны линии, в результате чего, она будет иметь ширину 2px.
Это происходит из-за неспособности дисплея отобразить пол-пиксиля.
Для того, чтобы вывести линию шириной в 1px нужно вычислять коориданаты с пол- пикселя, т.е вместо x=(1, 0) y=(1, 3) будет x=(1.5, 0) y=(1.5, 3)
В результате браузер будет рисовать линию охватывая по 0.5px с каждой стороны, тем самым получая линию в 1px.
Пример. Первая линия имеет цвет #ffffff, а вторая #808080. Разница только в координатах.
Различия в цветах происходят из-за сглаживания, которое упомянуто в вопросе.
Когда линия проходит через пол-пикселя, он окрашивается в серый цвет, иначе изображение будет зубчатым. Цвет пикселя выбирается в процессе сглаживания, при котором учитывается гамма. Пиксели будут окрашены в промежуточный цвет между цветом изображения и цветом фона.
Аналогичные действия происходят и в вашем случае.
В данном случае отключить сглаживание нельзя, это было бы возможно в случае использования drawImage.
Canvas - Dive Into HTML5
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() :
А это с ней:
Скажите, как от этого избавиться?
Ответ
При попытке нарисовать линию шириной в 1px, используя координаты x=(1, 0) y=(1, 3) будет охвачено по 0.5px с каждой стороны линии, в результате чего, она будет иметь ширину 2px.
Это происходит из-за неспособности дисплея отобразить пол-пиксиля.
Для того, чтобы вывести линию шириной в 1px нужно вычислять коориданаты с пол- пикселя, т.е вместо x=(1, 0) y=(1, 3) будет x=(1.5, 0) y=(1.5, 3)
В результате браузер будет рисовать линию охватывая по 0.5px с каждой стороны, тем самым получая линию в 1px.
Пример. Первая линия имеет цвет #ffffff, а вторая #808080. Разница только в координатах.
Различия в цветах происходят из-за сглаживания, которое упомянуто в вопросе.
Когда линия проходит через пол-пикселя, он окрашивается в серый цвет, иначе изображение будет зубчатым. Цвет пикселя выбирается в процессе сглаживания, при котором учитывается гамма. Пиксели будут окрашены в промежуточный цвет между цветом изображения и цветом фона.
Аналогичные действия происходят и в вашем случае.
В данном случае отключить сглаживание нельзя, это было бы возможно в случае использования drawImage.
Canvas - Dive Into HTML5
