Предыдущий ролик Следующий ролик  

Видео урок: Реальный пример: Sketchpad

HTML5: графика и анимация с Canvas

Еще один классный пример использования HTML5 canvas, чтобы создать что-то, что раньше требовало "родного" приложения - это Sketchpad. Вот здесь ссылка mugtug.com/sketchpad. Это приложение для рисования, созданное при помощи HTML5 canvas, и здесь я могу кое-что сделать, например, я могу выбрать эллипс (ellipse) и нарисовать эллипс вот здесь в canvas, я могу выбрать кисть (brush) и порисовать. Также вы видите, что вот в этом окне есть разные настройки. Таким образом, я могу все поменять. Я могу поменять цвета.

Я могу даже делать обрезку. Вот это инструмент для обрезки. Я забираю отсюда немного обрезанного прямоугольника и нажимаю Enter, и вы видите, что используя canvas, я могу захватить подмножество рисунков и переправить их в абсолютно новый canvas. Это действительно мощное приложение. Видите, я могу перетаскивать и другие окна. Это отличный пример того, чему ранее требовалось "родное" приложение, и оно полностью было реализовано при помощи технологий canvas и HTML5.