обращаю ваше 1-pixel линии по координатам как ctx.lineTo(10.5, 10.5). Рисование однопиксельной линии над точкой (10, 10) означает, что этот 1 пиксель в этом положении достигает от 9.5 до 10.5 что приводит к двум линиям, которые рисуются на холсте.

хороший трюк, чтобы не всегда должны добавить 0.5 к фактической координате, которую вы хотите нарисовать, если у вас много однопиксельных линий, это ctx.translate(0.5, 0.5) весь ваш холст в самом начале.

Это можно сделать в Mozilla Firefox. Добавьте это в свой код:

contextXYZ.mozImageSmoothingEnabled = false;

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

Он должен antialias векторной графики

сглаживание требуются для правильного построения векторной графики, которая включает в себя нецелые координаты (0.4, 0.4), что все, но очень мало клиентов будет делать.

если заданы нецелые координаты, холст имеет два варианта:

• сглаживания - нарисуйте пиксели вокруг координаты относительно того, как далеко целочисленная координата от нецелочисленной (округление ошибка.)
• круглые - применить некоторую функцию округления к нецелой координате (так 1.4 станет 1, например).

реальная проблема заключается в том, когда графика переводится ( перемещается) - переходы между одним пикселем и другим (1.6 => 2, 1.4 => 1), означает, что происхождение фигура может прыгать по отношению к родительскому контейнеру (постоянно смещаясь на 1 пиксель вверх/вниз и влево/вправо).

советы

Совет #1: вы можете смягчить (или затвердеть) сглаживание путем масштабирования холста (скажем, по x), а затем применить взаимный масштаб (1/x) к геометрии самостоятельно (не используя холст).

сравнить (без масштабирования):

С (масштаб холста: 0.75; ручной масштаб: 1.33):

и (масштаб холста: 1.33; ручной масштаб: 0.75):

Совет #2: если неровный вид действительно то, что вы после, попробуйте нарисовать каждую фигуру несколько раз (без стирания). С каждым розыгрышем сглаживающие пиксели становятся темнее.

сравнить. После рисования один раз:

после рисования трижды:

Я бы сделал все с помощью настраиваемого линия алгоритм, такой как алгоритм Bresenham по линии. Проверьте эту реализацию javascript: http://members.chello.at/easyfilter/canvas.html

Я думаю, что это, безусловно, решит ваши проблемы.

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

Я решил с помощью этого:

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

Вы можете использовать эту функцию, как это:

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

может быть, это полезно для кого-то.

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

С помощью этой комбинации я могу нарисовать хорошие 1px тонкие линии.

обратите внимание на очень ограниченный трюк. Если вы хотите создать изображение 2 цветов, вы можете нарисовать любую форму, которую вы хотите с цветом #010101 на фоне с цветом #000000. Как только это сделано, вы можете проверить каждый пиксель в она.сведения[] и значение 0xFF, что значение не является значением 0x00 :

imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
    if (imageData.data[i] != 0x00)
        imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);

результатом будет не сглаженное черно-белое изображение. Это не будет идеально, так как некоторое сглаживание будет иметь место, но это сглаживание будет очень ограничено, цвет формы очень нравится цвет фона.