Введение в Canvas
Использовать элемент canvas очень просто
Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas - это нововведение для всех браузеров.
Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.
Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.
Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.+
Этот элемент только для самых современных браузеров
Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.
Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)
К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.
Размеры элемента Canvas
В примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.
Немного о двумерном контексте
Немного выше я сказал, что элемент canvas - это только половина всей истории. Вторая половина - это как раз и есть двумерный контекст, который по сути позволяет вам видеть и всю мощь функционала данного элемента.
Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря javascript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.
Система координат
Если вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.
Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).
Получение доступа к двумерному контексту
Для того чтобы получить доступ к двумерному контексту, вам понадобится применить javascript API. В данном случае, вам потребуется функция getContext. Пример:
Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым javascript фрэймворком или поместить скрипт в конец документа.
В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!
Теперь, когда у нас есть доступ к двумерному контексту, вы можете смело начинать пользоваться всеми функциями вышеупомянутого API. Одной из самых часто используемых функций является fillRect, которая создаёт квадраты чёрного цвета (по умолчанию).
Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:
ctx.fillRect(50, 50, 100, 100);
Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:
Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?
Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется javascript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат - это тот же самый прямоугольник, у которого все стороны равны.
В методе fillRect может быть прописано 4 параметра:
Первый - это позиция по оси x;
Второй - это позиция по оси y;
Третий - это параметр, отвечающий за ширину;
Четвёртый - это высота.
Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:
ctx.fillRect(x, y, width, height);
Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в javascript API предусмотрена специальная функция strokeRect:
ctx.strokeRect(50, 50, 100, 100);
Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:
Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.
Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.
Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:
beginPath: начало схемы;
moveTo: метод для создания точки;
lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
closePath: завершить схему.
fill: заполнить фигуру цветом.
stroke: создать контур.
Попробуйте следующий пример:
Данный код нарисует треугольник чёрного цвета:
Те же самые принципы вы можете использовать для рисования фигур, которые вам понадобятся. В следующем уроке, посвящённом данной теме, мы поговорим о более продвинутом рисовании фигур, таких как овалы, кривая Безье и др.
Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.
Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в javascript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.
Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:
Данный код окрасит квадрат в красный цвет:
Или вы можете изменить цвет рамки квадрата:
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeRect(50, 50, 100, 100);
Вот вы и научились применять данные методы:
Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.
Сразу стоит отметить, что изменение цвета не приводит к преобразованию уже существующего содержания элемента canvas. К примеру, если вы нарисовали черный прямоугольник, затем создали наполнитель для красного цвета, а потом нарисовали ещё один прямоугольник, то первая фигура останется чёрной.
Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из javascript API - lineWidth.
Можете добавить данный код в прошлый пример:
И вот какой у вас получится результат:
Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:
И вот что у вас получится:
Также в javascript API, существуют ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации к specification.
Последняя вещь, которую я хочу вам сегодня показать – это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться :)
В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из javascript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.
В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:
В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.
Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.
Если вы не определились с высотой и шириной, то можете писать и так:
Стирание небольших фрагментов
Для того чтобы стереть небольшой фрагмент, вам не обязательно зачищать всю площадь элемента canvas. Вы без проблем можете стереть необходимую вам область. Представьте, что у вас нарисовано 2 квадрата, один из которых вы хотите стереть:
На данный момент картина такая:
Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:
ctx.clearRect(50, 50, 100, 100);
Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:
Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.
Canvas прост в использовании и изучении
Надеюсь, вы убедились в том, что canvas - это очень перспективный элемент веб страницы. Он позволяет создавать вам изображения, используя чистый код без никаких плагинов. Он прост в использовании и изучении, и на самом деле в умелых руках может превратиться во что-то очень оригинальное.
В следующей статье, мы рассмотрим некоторые продвинутые техники работы с элементом canvas, такими как рисование овалов, кривых линий и других вещей. Если этого будет недостаточно, то в дальнейшем мы расскажем вам, как трансформировать объекты (поворачивать, уменьшать, увеличивать), как работать с изображениями, а так же поработаем с анимацией. Вам будет очень интересно, можете поверить мне на слово.
А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент - это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.
Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas - это нововведение для всех браузеров.
Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.
<canvas width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
<!-- Insert fallback content here -->
</canvas>
Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.
Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.+
Поддержка
Этот элемент только для самых современных браузеров
Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.
Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)
К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.
Размеры элемента Canvas
В примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.
Немного о двумерном контексте
Немного выше я сказал, что элемент canvas - это только половина всей истории. Вторая половина - это как раз и есть двумерный контекст, который по сути позволяет вам видеть и всю мощь функционала данного элемента.
Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря javascript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.
Система координат
Если вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.
Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).
Получение доступа к двумерному контексту
Для того чтобы получить доступ к двумерному контексту, вам понадобится применить javascript API. В данном случае, вам потребуется функция getContext. Пример:
<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым javascript фрэймворком или поместить скрипт в конец документа.
В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!
Рисуем квадраты
Теперь, когда у нас есть доступ к двумерному контексту, вы можете смело начинать пользоваться всеми функциями вышеупомянутого API. Одной из самых часто используемых функций является fillRect, которая создаёт квадраты чёрного цвета (по умолчанию).
Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:
ctx.fillRect(50, 50, 100, 100);
Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:
Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?
Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется javascript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат - это тот же самый прямоугольник, у которого все стороны равны.
В методе fillRect может быть прописано 4 параметра:
Первый - это позиция по оси x;
Второй - это позиция по оси y;
Третий - это параметр, отвечающий за ширину;
Четвёртый - это высота.
Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:
ctx.fillRect(x, y, width, height);
Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в javascript API предусмотрена специальная функция strokeRect:
ctx.strokeRect(50, 50, 100, 100);
Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:
Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.
Рисование по схеме
Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.
Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:
beginPath: начало схемы;
moveTo: метод для создания точки;
lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
closePath: завершить схему.
fill: заполнить фигуру цветом.
stroke: создать контур.
Попробуйте следующий пример:
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.fill();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.fill();
Данный код нарисует треугольник чёрного цвета:
Те же самые принципы вы можете использовать для рисования фигур, которые вам понадобятся. В следующем уроке, посвящённом данной теме, мы поговорим о более продвинутом рисовании фигур, таких как овалы, кривая Безье и др.
Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.
Изменение цветов
Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в javascript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.
Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(50, 50, 100, 100);
ctx.fillRect(50, 50, 100, 100);
Данный код окрасит квадрат в красный цвет:
Или вы можете изменить цвет рамки квадрата:
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeRect(50, 50, 100, 100);
Вот вы и научились применять данные методы:
Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.
Сразу стоит отметить, что изменение цвета не приводит к преобразованию уже существующего содержания элемента canvas. К примеру, если вы нарисовали черный прямоугольник, затем создали наполнитель для красного цвета, а потом нарисовали ещё один прямоугольник, то первая фигура останется чёрной.
Изменение толщины линий
Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из javascript API - lineWidth.
Можете добавить данный код в прошлый пример:
ctx.lineWidth = 20;
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeRect(50, 50, 100, 100);
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeRect(50, 50, 100, 100);
И вот какой у вас получится результат:
Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:
ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.stroke();
И вот что у вас получится:
Также в javascript API, существуют ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации к specification.
Стираем объекты из Canvas
Последняя вещь, которую я хочу вам сегодня показать – это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться :)
В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из javascript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.
В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(0, 0, 500, 500);
ctx.clearRect(0, 0, 500, 500);
В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.
Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.
Если вы не определились с высотой и шириной, то можете писать и так:
ctx.clearRect(0, 0, canvas.width, canvas.height);
Стирание небольших фрагментов
Для того чтобы стереть небольшой фрагмент, вам не обязательно зачищать всю площадь элемента canvas. Вы без проблем можете стереть необходимую вам область. Представьте, что у вас нарисовано 2 квадрата, один из которых вы хотите стереть:
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(200, 50, 100, 100);
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(200, 50, 100, 100);
На данный момент картина такая:
Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:
ctx.clearRect(50, 50, 100, 100);
Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:
Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.
Идём в ногу со временем
Canvas прост в использовании и изучении
Надеюсь, вы убедились в том, что canvas - это очень перспективный элемент веб страницы. Он позволяет создавать вам изображения, используя чистый код без никаких плагинов. Он прост в использовании и изучении, и на самом деле в умелых руках может превратиться во что-то очень оригинальное.
В следующей статье, мы рассмотрим некоторые продвинутые техники работы с элементом canvas, такими как рисование овалов, кривых линий и других вещей. Если этого будет недостаточно, то в дальнейшем мы расскажем вам, как трансформировать объекты (поворачивать, уменьшать, увеличивать), как работать с изображениями, а так же поработаем с анимацией. Вам будет очень интересно, можете поверить мне на слово.
А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент - это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.