Weird HTML 5 Canvas Antialiasing

Question

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

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

Достаточно сказать, что эта ошибка появляется только в некоторых конфигурации, но я хотел бы избавиться от него навсегда. Есть ли способ обойти это? Были ли у вас проблемы с сглаживанием в холсте?

Я сделал this fiddle, что демонстрирует проблему и позволяет вам играть с размерами холста и количества ячеек. Он также содержит код, который я использую для рисования ячеек, чтобы вы могли проверить его и сказать мне, что я делаю что-то неправильно.

var ctx = canvas.getContext('2d'); 
ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
for (var i = 0; i < numberOfCells; ++i) { 
    for (var j = 0; j < numberOfCells; ++j) { 
    ctx.fillStyle = '#000'; 
    ctx.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight); 
    } 
} 

Спасибо заранее,

Петр.

Answer 1

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

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

Несмотря на мои усилия, линии все еще существуют. Какие-либо предложения?

Вот скрипка демонстрирует свою технику: https://jsfiddle.net/ngxjnywz/5/

Answer 2

jsFiddle: https://jsfiddle.net/ngxjnywz/2/

фрагмент JavaScript

var cellWidth = Math.ceil(canvasWidth/numberOfCells); 
var cellHeight = Math.ceil(canvasHeight/numberOfCells); 

В зависимости от ширины, высоты и ваши numberOfCells вы иногда получаете ... позволяет сказать, что 4.2, который 4, однако это будет отображаться неправильно и позволит создать пустую строку размером 1 пиксель. Таким образом, все, что вам нужно сделать, это использовать функцию Math.ceil, и это приведет к тому, что ваш cellWidth и cellHeight всегда будут больше, и вы больше не получите пустых строк.

Answer 3

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

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

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

Этот ответ показывает, как удалить артефакты для нетрансформированного холста. How to fill the gaps