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

[riva]

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

[ksa]

расскажите пожалуйста про Convas

http://htmlbook.ru/html5/canvas

[riva]

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

[Erolast]

Вы, похоже, совсем ничего не знаете о веб-програмировании. 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'ом. Нет, конечно же, можно с помощью него отрисовать всю страницу, но это изврат и так никто не делает.

[riva]

Вы, похоже, совсем ничего не знаете о веб-програмировании.

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

[danik.js]

Есть ли какой то инструмент для рисование, который используют все продвинутые js программисты, но который не известен новичку?

Если и есть, то о нем никто тебе не расскажет. Ты должен сам дорасти.

Но использует ли он GPU?

Использует.

Возможно ли отрисованные элементы Canvas сделать динамическими ( перетаскивание и событии мыши ) ?

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

Можно при помощи js динамически рисовать SVG?

Да. В этом тебе поможет DOM

[riva]

Если и есть, то о нем никто тебе не расскажет. Ты должен сам дорасти.

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

раз ты вызвался реализовать все вручную

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

кстати есть даже ui-фреймворк, основанный на <canvas>, гугл в помощь

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

[Erolast]

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

[danik.js]

Неужели сложно сказать, какой лучший???

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

[danik.js]

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

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