Доброго времени суток!
Введение
Только ленивый никогда не открывал какой-либо графический редактор, чтобы нарисоввать что-нибудь. Все мы этим занимались. Да и сейчас занимаемся. Только вот графические редакторы представляют собой исполняемые файлы, а хочется открыть страничку в браузере и начать рисовать, после чего сохранить результат на тот же сайт.
И с приходом HTML5 у нас такая возможность появилась!
new Canvas() ?
Для того, чтобы рисовать на холсте, сначала мы должны объявить элемент Canvas в разметке нашей страницы с некоторыми атрибутами, среди которых width — высота и height — ширина нашего холста. Объявление будет выглядеть следующим образом:
Внутри элемента мы должны создать абзац, который пользователь увидит в том случае, если его браузер не поддерживает Canvas. Например, мы попросим его обновить браузер.
Вот такое предупреждение мы рискуем увидеть:
Не увидели? Поехали дальше!
Получаем холст в рабство в своё распоряжение
Следующим необходимым шагом является получение 2D контекста Canvas, чтобы в дальнейшем мы имели возможность работать с ним. Нам же от него только это и нужно?. Тут на помощь нам приходит JavaScript:
var canv = document.getElementById("canv"); // получаем ссылку на элемент
var ctx = canv.getContext("2D"); // получаем контекст
Вот, собственно, и всё.
И это работает?
Да, абсолютно. Давайте убедимся в этом, придав элементу canvas подобный стиль:
#canv {
border: 1px black dotted;
border-radius: 10px;
}
И откроем наш браузер. В случае успешной инициализации мы увидим следующее:
Рисуем, сегодня мы с тобой рисуем!
Итак, холст находится полностью в нашем распоряжении. Давайте что-нибудь нарисуем. Линию. Нет проблем:
ctx.strokeStyle = "black"; // указываем цвет
ctx.lineWidth = "5"; // устанавливаем ширину линии
ctx.moveTo(0,0); // устанавливаем кисть в позицию (0;0)
ctx.lineTo(100,100); // рисуем линию от (0;0) до (100;100)
ctx.lineTo(300,200); // рисуем линию от (100;100) до (300;200)
ctx.stroke(); // показываем изменения на экране
Результат не замедлил сказаться:
Разбор полётов
Но давайте-ка разберёмся в том, почему для такой тривиальной задачи, как отрисовка линии понадобилось пять строк кода. Нет, ну хорошо — четыре. Давайте разберём код по порядку.
ctx.strokeStyle = "black";
Здесь мы указываем кисти, что нужно рисовать чёрным цветом. На самом деле существует ещё один style-атрибут, который указывает цвет — fillStyle, который указывает кисти, что (!!!) цвет заливки должен быть, например, красным. А strokeStyle указывает кисти на то, каким цветом мы должны отрисовывать границу или линию, что в принципе одно и то же.
ctx.lineWidth = "5";
Тут всё просто до безобразия — указываем ширину нашей линии.
ctx.moveTo(0,0);
Здесь всё намного интереснее. В данном случае мы указываем начальное положение кисти, из которого и будет происходить отрисовка линии.
ctx.lineTo(100,100);
А отрисовываем линию мы как раз до этого положения на координатной прямой. Стоит заметить, что каждый раз move'ить не обязательно. Например, если вам нужно нарисовать первую линию, а сразу же из точки конца сделать точку начала второй линии, то можно просто stro'чить.
ctx.lineTo(300,200);
Без комментариев… Просто-напросто рисуем вторую линию.
ctx.stroke();
Отображаем нарисованное на холсте. Казалось бы, всё просто, но и тут разработчики намудрили. Пьянству бой!. stroke() необходимо использовать лишь для тех примитивов, которые в начале названия имеют stroke (например, strokeRect).
В случае, если мы не воспользуемся этим методом, то отрисованного во внеэкранном буфере мы не увидим. Тут сразу вспоминается ситуация с двойной буферизацией в J2ME.
WTF?
Там ситуация обстоит аналогичная, но она касается всех графических примитивов. Вот так, например, мы можем осуществить отрисовку на GameCanvas:
protected void run() { // отрисовка выполняется по запуску треда
Graphics g = getGraphics(); // получаем ссылку на объект Graphics для работы с примитивами
w = getWidth(); // получаем высоту экрана
h = getHeight(); // получаем ширину экрана
g.setColor(Graphics.BLACK); // ставим цвет кисти
g.drawLine(0,0,w,h); // рисуем линию
flushGraphics(); // отображаем изменения на холсте
}
Я сделал комментарии к коду, так что вам он должен быть понятен. Ситуации со stroke() аналогичная.
feelings fill'ings
Но этот метод используется не везде. Например, для отрисовки закрашенного прямоугольника он не нужен:
ctx.fillStyle = "aqua";
ctx.fillRect(20,20,100,100);
ctx.fillStyle = "silver";
ctx.fillRect(100,100,200,200);
ctx.fillStyle = "red";
ctx.fillRect(150,150,250,250);
И вот наши треугольники, отрисованные без хождения по подводным камням:
Заключение
Вот так в пару шагов мы можем рисовать в окне нашего браузера. В следующей части мы более детально ознакомимся с тем, что можно отрисовывать, какие трансформации можно применять и т.д.
Продолжение следует! А пока рекоммендую вам почитать вот это и это.
