Введение в Canvas
В этой статье мы познакомим вас c новым элементом HTML5 - canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.
Я надеюсь, вам понравится эта серия уроков. Она рассчитана на тех, кто имеет какой-то опыт работы в JavaScript, и совсем ничего не знает насчёт элемента canvas. Если вы новичок в JavaScript, не переживайте, вы приобретёте некоторые знания, прочитав данную статью.
Знакомимся с элементом Canvas
Использовать элемент canvas очень просто
Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas - это нововведение для всех браузеров.
Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.
<canvas width="500" height="500">
<!-- Insert fallback content here -->
</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>
Заметьте: в этом примере мы применяем 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();
Данный код нарисует треугольник чёрного цвета:
Те же самые принципы вы можете использовать для рисования фигур, которые вам понадобятся. В следующем уроке, посвящённом данной теме, мы поговорим о более продвинутом рисовании фигур, таких как овалы, кривая Безье и др.
Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.
Изменение цветов
Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.
Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:
ctx.fillStyle = "rgb(255, 0, 0)"; 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.lineWidth = 20; 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);
В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.
Заметьте: аргументы для метода 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);
На данный момент картина такая:
Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:
ctx.clearRect(50, 50, 100, 100);
Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:
Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.
Идём в ногу со временем
Canvas прост в использовании и изучении
Надеюсь, вы убедились в том, что canvas - это очень перспективный элемент веб страницы. Он позволяет создавать вам изображения, используя чистый код без никаких плагинов. Он прост в использовании и изучении, и на самом деле в умелых руках может превратиться во что-то очень оригинальное.
В следующей статье, мы рассмотрим некоторые продвинутые техники работы с элементом canvas, такими как рисование овалов, кривых линий и других вещей. Если этого будет недостаточно, то в дальнейшем мы расскажем вам, как трансформировать объекты (поворачивать, уменьшать, увеличивать), как работать с изображениями, а так же поработаем с анимацией. Вам будет очень интересно, можете поверить мне на слово.
А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент - это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/3sLdSMmSl7o/lessons.php
|
В этой статье мы познакомим вас c новым элементом HTML5 - canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.