ArtemSmirnov May 14 2011 at 19:49

Еще одно Canvas руководство [1]: Canvas элемент, прямоугольники, пути

5 min

19K

Canvas*

+68

Comments 29

GLuRE May 14 2011 at 20:49

Урок супер! Спасибо! Жду с нетерпением следующего! ;)

mikenerevarin May 14 2011 at 21:48

За дуги большое спасибо. С нетерпением жду про imageData

TheShock May 15 2011 at 03:00

Если не пугает базовый английский, то есть на MDC с примером, как обрабатывать видео онлайн

TheShock May 15 2011 at 03:03

Хотя, очень легко можно нагуглить и русские туториалы

ckald May 15 2011 at 05:50

Поддерживаю со страшной силой. Вероятно, я плохо гуглил, но интересуют, собственно, механизмы работы с imageData. Например, отличается ли выполнение drawImage от прямой работы с массивом пикселей — то есть, как будет быстрее. Туда же оправданность использования двойной буфферизации или отрисовки в скрытый canvas с последующим копированием на видимый.

Все это в итоге сводится к вопросу: нужно ли лопатить код так, чтобы работа с canvas ограничивалась одноразовым выполнением putImageData при постоянной (20-50 Гц) перерисовке при условии, что большую часть времени большая часть изображения статична.

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

AHDPEu May 14 2011 at 23:30

Спасибо) Сижу второй раз перечитываю.

joger May 14 2011 at 23:45

если вы не забудете своё обещание про ближайшее будущее, то я думаю многие вам будут благодарны

ananazzz May 14 2011 at 23:49

Отличный пример! Спасибо!

lazycat May 15 2011 at 01:19

спасибо, буду ждать продолжения!

TheShock May 15 2011 at 02:47

MDC » Docs » Обучение canvas » Рисование фигур

Ну и точно такая же статья была у shpaker'a

Зачем вы два раза проходите один и тот же путь?

ctx.beginPath()
ctx.arc(200,300,70,0,Math.PI*2,true)
ctx.stroke()  //Нарисуем круг по которому определим область пути

ctx.beginPath()
ctx.arc(200,300,70,0,Math.PI*2,true)
ctx.clip()      //Ограничим область для рисования областью путя

// =>

ctx.beginPath()
ctx.arc(200,300,70,0,Math.PI*2,true)
ctx.stroke()  //Нарисуем круг по которому определим область пути
ctx.clip()    //Ограничим область для рисования областью путя

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

У Вас есть статьи получше.

ArtemSmirnov May 15 2011 at 08:59

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

maxvipon May 16 2011 at 09:33

Кстати, в том же MDN есть ссылка на хороший англоязычный ресурс html5canvastutorials.com. Все структурировано, просто и понятно.

TheShock May 15 2011 at 02:56

И кстати,

Отрисовка картинок от shpaker
Отрисовка картинок на MDC
Трансформации доступным языком от Nutochka

Трансформации, композиция, стилизация, градиенты, тени, манипуляция с imageData и даже анимация — всё есть на MDC » Canvas очень доступным и предельно понятным языком, на 90% ещё и на русском. А чего нет — лучше помочь с переводом MDC)

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

Моё имхо — интересное и более-менее актуальное из вашего всего плана — только анимация. И то, если это будет что-то интересно, а не пересказ MDC » Canvas » Animation

Повышайте уровень, хватит топтаться у порога, идите вперед!

ArtemSmirnov May 15 2011 at 08:54

Туториал на MDC я какраз и не читал, единственное чем я руководствовался это www.selfhtml5.org/wp-content/uploads/2010/07/HTML5_Canvas_Cheat_Sheet.png