Рисование линий в холсте, но последние выцветшие

Я пытаюсь нарисовать сетку белых линий на черном фоне.Рисование линий в холсте, но последние выцветшие

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

источник

2012-04-29 hoylemd

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

См. Иллюстрацию: первая горизонтальная линия была нарисована с y-позицией 1. Эта линия нечеткая и широкая. Вторая горизонтальная линия была нарисована с y-позицией 4,5. Он тонкий и точный.

enter image description here

Например, в коде, у меня были хорошие результаты, изменив горизонтальный контур линии к этому:

   // Horizontal lines 
       for (var i = 1; i < objCanvas.height/intGridWidth; i++) 
       { 
        objContext.strokeStyle = "white"; 
        var y = Math.floor(i*intGridWidth)+0.5 
        objContext.moveTo(0, y); 
        objContext.lineTo(objCanvas.width, y); 
        objContext.stroke(); 
       }

Вот скрипка демонстрирует его с очень тонкими и чистыми линиями:

http://jsfiddle.net/dystroy/7NJ6w/

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

function drawThinHorizontalLine(c, x1, x2, y) { 
    c.lineWidth = 1; 
    var adaptedY = Math.floor(y)+0.5; 
    c.beginPath(); 
    c.moveTo(x1, adaptedY); 
    c.lineTo(x2, adaptedY); 
    c.stroke(); 
}

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

источник

2012-04-30 07:29:00

Я сделал схему, чтобы сделать ее более ясной: http://canop.org/blog/?p=220 –

Удивительный! Это потрясающе. Большое спасибо, и жаль, что не ответил раньше. – hoylemd

Это не выглядит увядшим для меня. Возможно, это как-то связано с вашей ОС или ПК, который не может правильно отобразить чертеж. Я использую Chrome 20 на Win 7. Проверьте это.

источник

2012-04-29 16:23:15 Dowrow

Я нахожусь в Windows 7, а также с Chrome 18.0.1025.162 m. Я также попробовал его с самым современным firefox, и он все еще потускнел. – hoylemd

Вы должны определить objContext.lineWidth так:

objContext.lineWidth = 2;

Я не уверен, почему последняя строка получает утрачен, хотя. См. http://jsfiddle.net/jSCCY/

источник

2012-04-29 16:37:34 dfsq

Это помогло, но когда я установил его на один идентификатор, теперь исчезла всякая черта для всех строк. Я хочу, чтобы линии были действительно тонкими. это то, что у меня есть сейчас: http://jsfiddle.net/jSCCY/7/ – hoylemd

Рисование линий в холсте, но последние выцветшие

ответ

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