@ArtemSmirnov14 мая 2011 в 15:49

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

5 мин

19K

Canvas *

+68

Комментарии 29

@GLuRE 14 мая 2011 в 16:49

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

@mikenerevarin 14 мая 2011 в 17:48

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

@TheShock 14 мая 2011 в 23:00

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

@TheShock 14 мая 2011 в 23:03

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

@ckald 15 мая 2011 в 01:50

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

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

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

@AHDPEu 14 мая 2011 в 19:30

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

@joger 14 мая 2011 в 19:45

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

@ananazzz 14 мая 2011 в 19:49

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

@lazycat 14 мая 2011 в 21:19

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

@TheShock 14 мая 2011 в 22: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 15 мая 2011 в 04:59

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

@maxvipon 16 мая 2011 в 05:33

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

@TheShock 14 мая 2011 в 22:56

И кстати,

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

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

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

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

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

@ArtemSmirnov 15 мая 2011 в 04:54

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