Canvas Элемент HTML 5
Canvas (англ. canvas — «холст» ) — элемент HTML 5, который предназначен для создания растрового изображения при помощи Java. Script.
Поддерживающие браузеры n Internet Explorer 9. 0+ n Safari 3. 0+; n Firefox 3. 0+ n Chrome 3. 0+ n Opera 10. 0+ n i. OS 1. 0+ n Android 1. 0+
Атрибуты n id (определяет имя элемента для доступа к нему из скриптов) n width (ширина) n height (высота) n margin n border n background и т. д
Структура элемента
2 D Rendering Context
Рисование прямоугольников Метод Описание fill. Rect(x, y, ширина, высота) Рисует закрашенный прямоугольник. stroke. Rect(x, y, ширина, высота) Рисует не закрашенный прямоугольник. clear. Rect(x, y, ширина, высота) Очищает указанную зону делая ее полностью прозрачной.
Пример
Рисование составных фигур n begin. Path(); // Простые объекты помещаются здесь n close. Path(); // Автоматически завершает фигуру (соединяет конечную точку с начальной) n //Теперь необходимо вызвать один из методов для рисования фигуры определенной выше n stroke(); //нарисует фигуру не закрашенной n fill(); //нарисует фигуру закрашенной
Пример
Таблица простых объектов Метод Описание move. To(x, y) Устанавливает точку, из которой начнется рисование объекта. line. To(x, y) Рисует прямую линию. arc(x, y, радиус, нач_угол, Рисует круг. конеч_угол) rect(x, y, ширина, высота) Рисует прямоугольник.
Цвета n fill. Style //применения цвета к закрашенным объектам n stroke. Style //применения цвета к незакрашенным объектам
Пример
Оформление линий n line. Width – ширина линии n line. Cap – оформление кончика линии n line. Join - сглаживание стыков двух линий
Градиент n create. Linear. Gradient(x 1, y 1, x 2, y 2) – создание градиента n add. Color. Stop(точка, цвет) – цвет перехода
Создание теней Свойство Описание shadow. Offset. X Смещение тени от объекта по горизонтали. shadow. Offset. Y Смещение тени от объекта по вертикали. shadow. Blur Величина размытия тени. shadow. Color Цвет тени (по умолчанию черный).
Пример
Вставки n fill. Text("текст", x, y) - отображение произвольного текста n draw. Image('ссылка на картинку', x, y) – отображение картинки
3 D Роза методом Монте-Карло
Преимущества n Высокая производительность при отрисовке любых 2 D объектов. n Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения. n Можно сохранить полученное изображение в PNG или JPG файл. n Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т. п. ), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
Недостатки n Отрисовка основана на пикселях. n Не существует API для анимации. n Слабые возможности по рендерингу текста. n HTML 5 Canvas не подходит для создания веб -сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует постоянной перерисовки каждого элемента в интерфейсе.
Спасибо за внимание!