#javascript #html #canvas #drawing
#javascript #HTML #canvas #рисование
Вопрос:
Есть ли какой-нибудь способ нарисовать линию, используя javascript и canvas с «лучшим» сглаживанием, как это делает Flash?
Я знаю трюк Math.floor (coord) 0.5, позволяющий получить линию ровно в 1 пиксель, когда вам это нужно, но это не то, что я имею в виду. Следующие синие линии, нарисованные с использованием canvas, выглядят _угло во всех браузерах, поддерживающих html5 и cavas, поэтому они, вероятно, используют один и тот же плохой алгоритм сглаживания (вероятно, закодированный для скорости, а не для лучшего визуального впечатления). Это одно и то же, независимо от ширины линии (на самом деле, чем толще, тем уродливее):
Обрезка скриншота синими линиями в 1 пиксель:
и 3px:
Как вы можете видеть, это не самый красивый способ рисовать хорошие сглаженные линии, и хорошо выглядит только нижняя строка. Клиент требует, чтобы приложение для работы с графиками, над которым я работаю, должно «хорошо выглядеть», и очень требователен к эстетике pov, и я, вероятно, откажусь от решения HTML5 / Canvas и перейду на Flash, если не смогу решить эту проблему. Или, может быть, я мог бы закодировать хороший алгоритм рисования сглаженных линий на javascript (кто-нибудь может дать мне для этого какие-нибудь ресурсы?) Извините, что не добавляю картинку с линиями, нарисованными во Flash, но дело в том, что они просто выглядят хорошо, сглаживание выполнено правильно.
Комментарии:
1. Вы знаете, что люди слышат крики, когда вы используете все заглавные буквы, верно? При необходимости используйте разумное количество жирного шрифта и курсива , но ВСЕ заглавные БУКВЫ — это просто запрет. Можно сказать, некрасиво.
2. Черт возьми, судя по вашему рисунку, мне интересно, действительно ли вы хотите вообще использовать Canvas. Похоже, что векторы могли бы быть более подходящими. RaphaelJS , похоже, обеспечивает красивые линии с помощью SVG и VML в Firefox 3.0 , Safari 3.0 , Chrome 5.0 , Opera 9.5 и Internet Explorer 6.0 . Там поддерживается хороший набор движков рендеринга. Затем вы могли бы использовать canvas (наложенный в порядке z), где / когда / если вам действительно нужно растровое изображение.
3. Спасибо! Прямо сейчас я изучаю RaphaelJS, чтобы посмотреть, подходит ли он моему приложению и приемлемо ли с точки зрения производительности…
4. @T.J. Crowder: Выясните, как добавить жирный шрифт или курсив к заголовку stackoverflow — тогда вы сможете критиковать
5. @Ian Boyd: В версии вопроса, который я прокомментировал, использовались все заглавные буквы в тексте. Что касается заголовков: может быть, есть причина , по которой выделение не допускается? И использование ВСЕХ заглавных букв не является решением?
Ответ №1:
Вместо использования 2D drawing API вы можете использовать векторные элементы SVG. Для этого вам пришлось бы реализовать свой собственный API, но таким образом вы получите красивые линии, подобные тем, что есть во flash. SVG-редактирование является примером того, что вы можете делать с SVN в браузере.
Ответ №2:
Списываю ответ Мариуса:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="50" y="37"
style="fill:none;stroke-width:1;
stroke:rgb(0,0,0)"/>
<rect width="100" height="50" x="200"
style="fill:none;stroke-width:1;
stroke:rgb(0,0,0)"/>
<line x1="50" y1="67" x2="250" y2="25"
style="stroke:rgb(0,0,255);stroke-width:2"/>
<text x="2" y="50" >Beta</text>
<text x="201" y="13" >Omega</text>
</svg>
SVG можно нарисовать на стороне клиента с помощью javascript, поскольку это просто элементы DOM. И, забегая вперед, это аппаратное ускорение.
Ответ №3:
Я сомневаюсь, что вы найдете что-нибудь, что заставит это выглядеть действительно хорошо, но не слишком медленно, чтобы быть полезным. Единственное, что вы можете попробовать, что не слишком повредит производительности, — это нарисовать 4 линии, наложенные одна на другую, каждая со смещением на долю пикселя в x и y. Недостатком является то, что это будет выглядеть немного размыто.