Графика и рисование в js
 

В недалеком будущем я хочу поучится js уже на деле, то есть переводить на js классы написанные для as. Ну и естественно хочется первым делом увидеть результат на экране. И вот я бегло посмотрев что есть в js для работы с графикой, обнаружил только html и css. И у меня сразу появилось желание спросить у Вас - есть какие то классы для рисования ( вектора, bitmap atlas ) ?
И отдельный вопрос - если существуют программы для рисования графики, то подскажите самые лучшие. Или Вы фотошоп и иллюстратор с экспортом в html делаете?
И если можно расскажите пожалуйста про Convas. Правильно ли я понял, что это самый лучший вариант для рисования?
И как его совместить с js? Пока писал не один раз подумал, что возможно я спрашиваю что то, что может вызвать смех))
Не обращайте внимание.

ksa Спасибо! А у js собственного класса рисования нет? Если мне нужно сделать выпадающее меню, то как рисовать сам выпадающий список? Или это делают при помощи css?

Вы, похоже, совсем ничего не знаете о веб-програмировании. javascript не используется для отрисовки элементов на странице, это делается с помощью HTML. HTML - это язык разметки, "каркас" любой страницы. Именно с помощью HTML рисуются все элементы - кнопки, поля ввода текста и т.п. Например, следующий код HTML создает кнопку с надписью "Я - кнопка" и уникальным идентификатором "btn_1":

<button id="btn_1">Я - кнопка</button>

CSS - это язык описания внешнего вида страницы. Это обои, мебель и декорации страницы. С помощью css задается, например, какого цвета должен быть какой-либо элемент, какая у него должна быть рамка, как элементы должны позиционироваться на странице. Следующий код CSS установит ширину и высоту всех кнопок на странице на 50 пиксилей:

button {
height: 50px;
width: 50px;
}

Javascript же нужен для всей динамики, всех изменений на странице. Когда что-то на странице начинает красиво вертеться, вылезать - это javascript. Когда вы, набиря сообщение, нажимаете на кнопку B, именно с помощью javascript этот тег вставляется в сообщение. Javascript - электропроводка и всевозможные приборы на странице. Пример javascript'а:

var x = "Привет!";
alert(x);

Этот код объявляет переменную x, присваивает ей значение "Привет!", и открывает окошко, содержащее текст "Привет!".

Canvas же нужен для рисования рисунков, и не более того. Это элемент html, управляемый javascript'ом. Нет, конечно же, можно с помощью него отрисовать всю страницу, но это изврат и так никто не делает.

Только начал учить, так что полностью с Вами соглашусь.
Тогда у меня вот какие вопросы - если я правильно понял, Canvas - это графический инструмент хваленого HTML5. Который ( опять, как я понял ) рисует растровую графику.. Но использует ли он GPU? Возможно ли отрисованные элементы Canvas сделать динамическими ( перетаскивание и событии мыши ) ?
Можно при помощи js динамически рисовать SVG?
На сколько сильно js нагружает мобильные платформы?
Есть ли какой то инструмент для рисование, который используют все продвинутые js программисты, но который не известен новичку?

Если и есть, то о нем никто тебе не расскажет. Ты должен сам дорасти.
Использует.
Ты можешь ловить события мыши на самом элементе <canvas>. Остальное ложится на твои плечи, раз ты вызвался реализовать все вручную. (кстати есть даже ui-фреймворк, основанный на <canvas>, гугл в помощь)
Да. В этом тебе поможет DOM

От части я согласен, но есть один момент, который называется - помощь.
Вот если бы автор этого форума был эгоистом, то он бы наверняка сказал себе - зачем мне помогать этим неучам, пусть сами ищут информацию, я же искал и научился без этого форума, пусть сами дорастут.
Я об этом не говорил, я сказал лишь о переводе некоторых классов, а каких я не говорил.
Неужели сложно сказать, какой лучший???
И возвращаясь к "всё сам решил реализовать"... Я был бы очень признателен, если бы кто то вспомнил человека, который рассказал ему о фраймворках или ещё об чем то и повторил его поступок. Я не верю, что Вы сами обо всё узнали.

Нетуды вас понесло.
Canvas нужен исключительно для всяких онлайн-фотошопов и онлайн-игрушек. Это инструмент для создания рисунков, но не веб-страниц. Управлять им куда сложнее, чем обычным HTML, да и, страница будет жутко тормозной.
А чтобы писать сайты, есть программа adobe dreamweaver, имеющая подсветку синтаксиса, визуальный редактор и прочие вкусности.

Кто лучший? Canvas-based UI фреймворк? А кто их сравнивал? Сколько их? Какова сфера их применения? Это малоизвестные не используемые в моей повседневной работе (и не планируемые) вещи. Такие штуковины редко кем используются, я даже не знаю где их можно применять. Интересовался раньше просто так, для расширения кругозора. И никто не подсказывал, сам просто подумал о том, что такое кто-нибудь реализовал, а гугл уже подтвердил мое предположение. Так что гугли если интересно.

Каких еще классов? Нет в HTML никаких классов к сожалению. Есть зашитые псевдо-конструкторы типа Element, HTMLElement, HTMLSelectElement, HTMLInputElement и тд, но от них никакого толку нет.
HTML - унылая штука. Ты если раньше занимался нативными приложениями то приготовься к худшему. HTML на сегодняшний день очень хромой. Только недавно начались какие-то подвижки, но как мне кажется что он как был костыльным и недоделанным, таким он и останется еще очень долго. Если что - речь именно о RIA-приложениях а не веб-сайтах.

Да при чём HTML ?) У меня естественно есть классы кнопок, скролов, меню и т.д. Вот я и решил, что начну с переноса этих классов, так как события и работа с координатами мало чем отличается. но я не нашёл класса для рисования и по этому спросил Вас.
Так же я очень хочу перенести самописные движки конструкторов, для которых как раз и нужно интерактивный холст, для drag-a обьектов и catmull-ов. Код, саму модель, я перепишу ( как я думаю ) ну или как всегда Вас спрошу) , а вот как это отобразить? Для меня очень удивительно, что у js, для которого даже TweenLite создали, нет класса рисования.
Вот на примере конструктора поставлю вопрос - как бы Вы это сделали?
Как это отображать?

И по поводу Canvas, если он такой не востребованный, то чем Вы пользуетесь для улучшения производительности? Есть какое то более лучшее решение с работой GPU?

А мужики то не знают. :)

Ну тогда тебе уже подсказали чем рисовать: HTML + CSS.
Посмотри ExtJS, DoJo, KendoUI, QooXdoo - это все DOM-based UI-фреймворки. Имеют как раз систему классов, которую можно расширять самому.
Про невостребованность я говорил об ui-фреймворке, основанном на canvas. Вот кстати нагуглил один такой: http://www.zebkit.com/

Для разметки используется HTML, а для изменения внешнего вида CSS, при этом можно не пользоваться Canvas.

Советую посмотреть в сторону UI библиотек типа jQuery UI, Dojo, YUI и т.п. где всё это уже реализовано, а потом написать свою, уже основываясь на примерах.

Javascript не является главентсвующим языком в веб-программировании. Главенствующим языком является HTML. Он используется для того, чотбы задать, ГДЕ_ЧО_НАХОДИТСЯ. Именно он нужен для отрисовки. Грубя говоря, HTML - это набор классов для отрисовки браузером. Canvas - это всего-лишь один из "классов" HTML, представляющий собой динамическое изображение. Он никогда не используется для полной отрисовки страницы. Это просто динамическое изображение. Не более того.
Javascript - СРЕДСТВО_ДЛЯ_ДИНАМИЧЕСКОГО _УПРАВЛЕНИЯ_ЭЛЕМЕНТАМИ_HTML. Если нужно сделать так, чтобы при нажати на кнопку подсветился текст, надо использовать javasript. Кнопка, текст - это html. Подсветка текста, то есть, динамическое изменение цвета фона текста - javascript.

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

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

Видел я редактор документов, отрисовывающий все с помощью canvas. Тормозит ужасно. Не конкурент обычным html'ным, как, например, гугловский. В веб-приложениях да, javascript является ключевым, но не стоит рассматривать его в качестве главного языка веб-программирования, предназначенного для отрисовки страницы, а html и css как его расширения. Потому я и пишу, что HTML является главным, javascript же и css нужны для более глубокого управления документом.