Ошибка (?) в статье по canvas на сайте

Gaspode · August 7, 2011

В статье наткнулся на следущее:

В. Почему мы начинаем x и y c 0.5, а не с 0?
О. Представьте каждый пиксел как большой квадрат. Все целочисленные координаты (0, 1, 2, ...) являются углами этих квадратов. Если вы рисуете однопиксельную линию между целыми координатами, она будет перекрывать противоположные стороны пиксельного квадрата, в результате будет нарисована ширина два пиксела. Чтобы нарисовать линию шириной только в один пиксел, необходимо сместить координаты на 0.5 перпендикулярно к направлению линии.
К примеру, если вы попытаетесь нарисовать линию от (1, 0) до (1, 3), браузер будет рисовать линию с перекрытием в полпиксела по обе стороны от x=1. На экране невозможно отобразить половину пиксела, поэтому линия будет расширена для покрытия двух пикселов.

Но это ж ерунда какая-то, откуда вообще это взято? Ничего подобного не происходит, проверить это - две минуты. Значения аргументов округляются, а уже потом линия рисуется. Там же алгоритм Брезенхема используется (или его модификация), он вообще работает только с целыми числами.

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

Или это я серьёзно где-то туплю о_О?

Edited August 7, 2011 by Gaspode

Int · August 7, 2011

И правда, бред. Разве линия рисуется в обе стороны от координаты, а не в большую? Например, точка в координате [0;0] закрасит нулевой пиксель, [0;1] закрасит первый пиксель по вертикали. Последний пиксель имеет координаты [width-1;height-1]. По версии автора, чтобы закрасить нулевой пиксель, нужно рисовать линию от [-0.5;-0.5]?

stars · August 7, 2011

Если рисовать линию от верхнего левого угла в низ например то да линия у вас будут в 1 пиксель при координатах 0:0, но если это будет посреди макета то линия будет в 2 пиксиля...

для проверки вот небольшой код

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript">
		window.addEventListener('load', function () {  
			var elem = document.getElementById('canvasplace');
			var context = elem.getContext('2d');
			context.clearRect(0, 0, 200, 200);
			context.strokeStyle = "#000000";
			context.strokeRect(20, 20, 150, 50)
			context.strokeRect(20, 80.5, 150, 50)
			context.strokeRect(20.5, 140.5, 150, 50)
			context.beginPath();
			context.moveTo(0, 0);
			context.lineTo(0, 300);
			context.moveTo(190, 0);
			context.lineTo(190, 300);
			context.moveTo(210.5, 0);
			context.lineTo(210.5, 300);
			context.stroke();
		}, false);
	</script> 
</head>
<body>
	<canvas id="canvasplace" width="300" height="200" >Мне очень жаль, но Ваш браузер не поддерживает технологию canvas</canvas>
</body>
</html>

Int · August 8, 2011

Я разочаровался в канвасе

stars · August 8, 2011

Я разочаровался в канвасе

Ну почему?))) У него есть ряд преимуществ перед тем же SVG в прочем есть и минусы но для разных задач ведь нужны разные решения...

И нету тут не чего страшного, да нам привычно что если проводишь линию от какой то координаты горизонтально или вертикально то линия идет по 1 ряду пиксилей, а тут считается что между пиксилями есть координатная сетка )) именно по этому и нужен сдвиг на 0.5 пиксиля

Great Rash · August 8, 2011

Я разочаровался в канвасе

Почему? Рисовать субпиксели - гораздо лучшая идея чем округлять значения до целых...

Int · August 8, 2011

потому что координаты должны быть координатами именно пикселей, а не каких-то абстрактных точек между пикселями, которые даже не имеют физической ширины.

Great Rash · August 8, 2011

Это ж векторы, что делать если у меня точка должна очутится в координате (10.5, 10.5)?

psywalker · August 8, 2011

потому что координаты должны быть координатами именно пикселей, а не каких-то абстрактных точек между пикселями, которые даже не имеют физической ширины.

Наоборот всё здорово, и благодаря дробным пикселям мы например можем делать правильные границы. Попробуй начертить границу в 1пк с двух сторон и увидишь, что у фигуры уже будет граница 2пк, а не 1, как тебе хотелось бы.

Int · August 8, 2011

с какой стати два? Или ты предлагаешь чертить по 0,5 с каждой стороны? Ну так логично, что две линии не могут в сумме давать толщину в один пиксель.

psywalker · August 8, 2011

с какой стати два? Или ты предлагаешь чертить по 0,5 с каждой стороны?

Да, именно так я и предлагаю!

Ну так логично, что две линии не могут в сумме давать толщину в один пиксель.

Почему не могут? Кто тебе это сказал?

Int · August 8, 2011

Потому что минимальная экранная величина — один пиксель. Как ты представляешь себе на экране линию толщиной в 0.5 пикселя? Почему бы сразу не в один микрон?

Для ЭЛТ-мониторов можно было представить что-то подобное, но только по горизонтали, потому что число строк в кадре фиксированное, а для LCD как? Если есть такие технологии, которые позволяют рисовать по 0,1 пикселя, что ж мой palm zire 31 так плохо фильмы показывает?

psywalker · August 8, 2011

Потому что минимальная экранная величина — один пиксель. Как ты представляешь себе на экране линию толщиной в 0.5 пикселя? Почему бы сразу не в один микрон?
Для ЭЛТ-мониторов можно было представить что-то подобное, но только по горизонтали, потому что число строк в кадре фиксированное, а для LCD как? Если есть такие технологии, которые позволяют рисовать по 0,1 пикселя, что ж мой palm zire 31 так плохо фильмы показывает?

1пк не означает, что пиксель не может быть дробным и что меньше его нет на экране. Пиксель - это просто удобная единица отсчёта. Но видимо, пока ты не попробуешь сам что нибудь нарисовать на кэнвасе, то не поймёшь, в чём преимущество и красота 0.5 пикселей.

Great Rash · August 9, 2011

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

Int · August 9, 2011

Субпиксели есть только в расчётах. Антиалиасинг на самом деле не рисует ни половину пикселя, ни одну десятую, он добавляет дополнительные соседние пиксели более бледных цветов, создавая градиент. Как ты себе представляешь транзистор, управляющий пропусканием света через пиксель, открытым слева и закрытым справа?

Great Rash · August 9, 2011

Я о том и говорю. Канвас тоже рисует субпиксели если координата получается дробной. Не вижу в этом ничего плохого.

Int · August 9, 2011

То есть, он захватывает соседние пиксели при отрисовке линии, но рисует другим цветом?

Great Rash · August 9, 2011

Да, ну тем же цветом, только с альфой.

Sign In

Ошибка (?) в статье по canvas на сайте

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information