Руководство по HTML5 Canvas

Canvas является той особенностью которую большинство веб-разработчиков хотят использовать для разработки по-настоящему богатых веб-приложений, и без необходимости для браузера, устанавливать дополнительно приложения.

Современные браузеры Chrome , Firefox и Internet Explorer 9 и 10 поддерживают canvas.

Canvas для веб-приложений

Если вы не знакомы с HTML5, прежде чем читать эту статью, прочитайте новые элементы HTML .

Элемент HTML5 Canvas

…разрешение зависит от растровых canvas, которое можно использоваться для визуализации графики, игровой графики и других визуальных образов.

С точки зрения непрофессионала, canvas является новым элементом в HTML5, который позволяет рисовать графику с использованием JavaScript . Он может быть использован для отображения текста, изображений, графики, прямоугольники, линии, градиенты и другие эффекты. Интерфейс API Canvas 2D содержит множество функций, которые дают вам возможность сделать практически всё в canvas что вам нравится. В настоящее время canvas поддерживает 2D, а не 3D.

Итак, как же вставить canvas документ HTML? Очень просто:



<canvas id="myCanvas" style="width:300px; height:300px"></canvas>


Этот код не чего не покажет в браузере, потому что canvas пуст. Давайте добавим границу, чтобы вы могли увидеть его.

чистый canvas canvas
Canvas с черной границей

На веб-страницу можно добавить несколько элементов canvas. Единственное требование что бы каждый canvas имел свой идентификатор, иначе на странице будет одинаковый canvas. Чтобы на странице появился canvas, вы должны ссылаться на canvas в контексте . Контекст дает вам доступ к 2D свойства и методы, которые позволяют рисовать и манипулировать изображениями в canvas. О контексте поговорим позже.

Каждый графический элемент имеет координаты х и у .

х - горизонтальные координаты
у — вертикальные координаты

Координаты canvas
Координаты canvas

Разница между SVG и Canvas

Важно понимать разницу между элементами SVG и Canvas. SVG является XML файлом на основе векторной графики. Вы можете добавить к нему таблицу стилей CSS и добавлять динамическое поведение с помощью SVG DOM. Canvas рисует графику и формы через JavaScript. Это тоже может быть как стиль, и вы можете добавить динамическое поведение к нему. Вот несколько причин что использовать canvas или SVG.

  • Canvas быстрее при составлении сложной графики
  • Вы можете сохранять изображение из canvas, из SVG это не получится.
  • Весь canvas состоит из пикселей.

Вот преимущества SVG.

  • SVG не зависит от разрешения, его можно масштабировать для разных разрешений экрана. Пример .
  • SVG — это XML, и предназначенных для различных элементов.
  • SVG хорошо использовать при сложной анимации.

А почему не использовать один с другим? Если ваш сайт не зависит от разрешения, тогда выберите SVG. Если вы разрабатываете игру и хотите сделать графику очень быстрой, или не хотите иметь дело с XML, тогда выбираем Canvas. В интернете они работают вместе, и дополняют друг друга. Пример .

Canvas и аппаратное ускорение

В более ранних версиях браузера, рендеринг графики — как и большинство ресурсоёмких задач — было возложено на CPU. Современные браузеры были переделаны в этой области, путем перевода графических ресурсоемких задач на GPU, графический процессор для графики использует Direct2D и DirectWrite . Что ускоряет обработку графики и облегчает нагрузку на центральный процессор (CPU). Пример

Canvas 2D API

canvas 2D API является объект, который позволяет рисовать и манипулировать изображениями и графикой в элементе canvas. Для ссылки на контекст canvas используется метод getContext , который является элементом canvas. Он имеет один параметр, который в настоящее время 2-й . Вот фрагмент кода для ссылок на контекст.



var myCanvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");


Каждый canvas имеет свой собственный контекст, так что если ваша страница содержит несколько элементов Canvas вы должны иметь ссылки на каждый контекст.

Помимо getContext, есть много других функций в canvas 2D API. Наиболее известные из них перечислены ниже.

Функции преобразования

  • scale — позволяет масштабировать текущий контекст.
  • rotate — позволяет поворачивать х и у координаты текущего контекста.

Функции State

  • save — позволяет сохранить текущее состояние контекста.
  • restore — позволяет восстановить состояние контекста из ранее сохраненного состояния.

Текстовые функции

  • font — получает или задает шрифт для текущего контекста.
  • fillText — заполнит текст к текущему canvas.
  • MeasureText - измеряет текущую ширину указанного текста.

Это не все методы, прикрепленные к Canvas 2D API.

Формы и цвета Canvas

Прямоугольник canvas
Есть целая группа свойств и функций для рисования фигур. Давайте начнем с прямоугольника. Вот соответствующие функции, доступные для рисования прямоугольников.

  • FillRect (х, у, W, H) — рисует прямоугольник в Canvas, используя текущий стиль заполнения
  • strokeRect (х, у, W, H) — рисует окно, которое описывает данный прямоугольник в Canvas, используя текущий стиль линии
  • clearRect (х, у, W, H) — удаляет все пиксели в Canvas, прямоугольник станет прозрачный черный

Чтобы нарисовать прямоугольник, самый простой способ состоит в использовании FillRect. Это рисует прямоугольник на Canvas с использованием текущих FillStyle . Вот как можно создать черный прямоугольник.



var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillRect(5, 5, 145, 145);


Этот код будет показывать черный прямоугольник, с сверху 5 пикселей, с права 5 пикселей и 145 пикселей в ширину и высоту.

черный прямоугольник canvas
Прямоугольник canvas

Если вы не указали цвет, то цвет по умолчанию всегда будет черный. Чтобы нарисовать еще один прямоугольник, назовите FillRect с различными параметрами. FillStyle может быть любого цвета, поэтому он может воспользоваться непрозрачностью совместимою с CSS3. Следующий код рисует три прямоугольника canvas, разных цветов, ближний полупрозрачный.



context.fillRect(5, 5, 145, 145);
    context.fillStyle = "rgb(0, 162, 232)";
    context.fillRect(40, 55, 145, 145);
    context.fillStyle = "rgba(255, 0, 0, 0.2)";
    context.fillRect(75, 105, 145, 145);


три прямоугольника canvas
Три прямоугольника canvas

Рисование кругов canvas

Чтобы нарисовать cirlce (круг), лучше использовании дугу. Дуга рисует круг canvas с использованием текущих FillStyle . Определение функции ниже.

  • дуга ( х , у , радиус startAngle , endAngle , против часовой стрелки) — дуга делает круг начиная с конца начального угла и заканчивается в конце конечного угла.

Вот как можно создать черный круг в canvas.



context.beginPath();
    context.fillStyle = "rgb(0, 0, 0)";
    context.arc(123, 93, 70, 0, 2 * Math.PI, true);
    context.fill();


круг canvas
Черный круг canvas

Чтобы нарисовать контур круга, используем strokeStyle вместо FillStyle . Затем вызов stroke вместо заполнения.



context.beginPath();
    context.strokeStyle = "rgb(0, 0, 0)";
    context.arc(123, 93, 70, 0, 2 * Math.PI, true);
    context.stroke();


Круг не должен быть на 360 градусов. Чтобы изменить форму, меняйте начальный и конечный радиус.



context.beginPath();
    context.strokeStyle = "rgb(0, 0, 0)";
    context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);
    context.stroke();


полукруг canvas
Полукруг canvas

Кривые безье

Более сложный рисунок с кривыми безье. Эту трудную задачу можно выполнить относительно просто с помощью функции bezierCurveTo. Эта функция указывает на текущий подкаталог с помощью контрольных точек, которые представляют собой кривую безье. Параметры bezierCurveTo ниже.

  • bezierCurveTo (cp1x, cp1y, cp2x, cp2y, х, у) — добавляет в данной точке текущий путь, связанный с предыдущим на кривую безье с данными контрольных точек.

Кривая Безье должна включать в себя три пункта. Первые два пункта контроль расчетов, а третий, конечная точка кривой. Вот что можно создать кривыми безье.



context.lineWidth = 20;
    context.beginPath();
    context.moveTo(5, 50);
    context.bezierCurveTo(30, 30, 130, 530, 200, 100);
    context.stroke();


Кривых Безье canvas
Рисунок с кривыми безье

С кривыми безье много чего можно нарисовать. Вот сложный пример составления улыбающееся лицо в canvas.



    / / Лицо

context.beginPath();
context.lineWidth = 10;
context.strokeStyle = "rgb(0, 0, 0)";
context.arc(200, 233, 150, 0, 2 * Math.PI, true);
context.stroke();

    / / Цвет лица

context.beginPath();
context.fillStyle = "rgba(80, 100, 80, 0.4)";
context.arc(200, 233, 150, 0, 2 * Math.PI, true);
context.fill();

    / / Правым глазом

context.lineWidth = 20;
context.beginPath();
context.moveTo(230, 130);
context.bezierCurveTo(230, 130, 230, 130, 240, 200);
context.stroke();

    / / Левый глаз

context.beginPath();
context.moveTo(170, 130);
context.bezierCurveTo(170, 130, 170, 130, 160, 200);
context.stroke();

    / / Верхняя губа

context.beginPath();
context.moveTo(100, 230);
context.bezierCurveTo(100, 230, 200, 380, 300, 230);
context.stroke();

    / / Нижняя губа

context.beginPath();
context.moveTo(100, 235);
context.bezierCurveTo(105, 270, 200, 480, 300, 232);
context.stroke();


Получается смайлик.

смайлик canvas
Улыбающееся лицо в canvas

Цвет фона canvas

В canvas можно смешать цвета или залить сплошным цветом даже сделать градиент или узор. Я использовал FillStyle в основном в предыдущих примерах. Эта функция заполняет фон контекста с цветом и может быть с множеством цветов. Следующий пример цвет фона, эффект радуги.



var a = 1;
for (j = 0; j < 100; j++) {
var r = 255, g = 0, b = 0;
for (i = 0; i < 150; i++) {

    / / Желтый

if (i < 25) g += 10.2;

    / / Зеленый

else if (i >= 25 && i < 50) r -= 10.2;

    / / Синий

else if (i >= 50 && i < 75) {
g -= 10.2;
b += 10.2;
}

    / / Фиолетовый

else if (i >= 75 && i < 100) r += 10.2;

    / / Красная

else b -= 10.2;
context.fillStyle = "rgba(" + Math.floor(r) + "," +
Math.floor(g) + "," + Math.floor(b) + "," + a + ")";
context.fillRect(3 * i, 5 * j, 3, 5); } a -= 0.01; }


градиенты canvas
Цвет фона, эффект радуги

Если не нужны сплошной цвета, вы можете использовать strokeStyle и strokeRect нарисовать контур прямоугольника. Еще одна особенность canvas дает возможность создания градиентов. Функции, связанные с этим приведены ниже.

  • addColorStop (смещение, цвет), — добавляет остановку цвета со значениями 0.0 смещением на одном конце градиента, 1.0 смещение на противоположном конце
  • createLinearGradient (x0, y0, x1, y1) — возвращает объект CanvasGradient, который представляет собой линейный градиент, краски по линии определяются координатами
  • createRadialGradient (х0, у0, г0, x1, y1, r1) — возвращает объект CanvasGradient, который представляет собой радиальный градиент, краски по конусу дают круги представлеными координатами

Линейный градиент может быть создан вызовом createLinearGradient. Чтобы добавить цвет градиента нужно вызвать addColorStop. Вызов этого добавляет указанный цвет х и у координат. В следующем примере показан простой линейный градиент.



var gradient = context.createLinearGradient(0, 0,0, 145);
    gradient.addColorStop(0, "#00ABEB");
    gradient.addColorStop(0.5, "yellow");>
    gradient.addColorStop(0.8, "green");
    gradient.addColorStop(1, "white");
    context.fillStyle = gradient;
    context.fillRect(5, 5, 145, 145);


линейные градиенты canvas
Линейный градиент canvas

Линии и тени текста в canvas

У canvas есть пути, их нужно заполнить. Вот некоторые из соответствующих свойств и функций для рисования линий.

  • lineWidth [ = value ] — возвращает текущую ширину линии. Установки ​​для изменения ширины линии.
  • LineCap [ = value ] - возвращает текущий стиль линии контур. Может быть установлен, чтобы изменить стиль контур линии. Контуры линии могут быть закруглённые и прямые.
  • LineJoin [ = value ] — возвращает текущую строку стилей.

Чтобы нарисовать линию вы пишите функции MoveTo и LineTo. Эти функции принимают х и у координаты, которые говорят где именно вы хотите нарисовать линию. Вы также можете указать ширину линии с помощью lineWidth. После того как вы определили строку, вы должны вызвать stroke, чтобы нарисовать линию.

Следующий пример демонстрирует, как рисовать серию линий, начиная с высокой и заканчивая тонкой.



for (i = 15; i > 0; i–) {
    context.strokeStyle = "blue";
    context.lineWidth = i;
    context.beginPath();
    context.moveTo(55, 15 + (15 – i) * 24);
    context.lineTo(335, 15 + (15 – i) * 24);
    context.stroke();
    }


линий Canvas
Линий Canvas

Чтобы добавить стиль к линии, вы можете изменить контур, установив LineCap. Что бы края были закруглёнными, нужно в контексте применить LineCap со значением round (круглый).



context.lineCap = "round";


руглые линии Canvas
Закруглённые линии Canvas

Текст в canvas

Текст так же просто нарисовать в элементе canvas как и линии. Некоторые из соответствующих свойств и функций для рисования текста:

  • font [ = value ] — возвращает текущие настройки шрифта. Синтаксис такой же, как и в свойствах CSS
  • textAlign [ = value ] — возвращает параметры выравнивания текста. Возможные значения: замостить, влево, вправо, и по центру
  • TextBaseline [ = value ] — возвращает текущие настройки выравнивания линии. Может быть установлен, чтобы изменить выравнивание по основным направляющим
  • fillText (текст, х, у [, MaxWidth]) — заполняет текст на данной позиции
  • strokeText (текст, х, у [, MaxWidth]) — штрихи текста на данной позиции

Чтобы напечатать текст canvas нужно использовать метод fillText . Я устанавливаю размер и тип шрифта с помощью настроек шрифта.



context.font = '24px "Tahoma"';
    context.fillText("Hello World!", 0, 0);


Вот результат.

текст canvas

Чтобы сделать текст прозрачный, установите значение для FillStyle.



context.fillStyle = "rgba(0, 0, 0, 0.2)";


и результат.

Прозрачный текст canvas

Добавление эффекта, тень для текста canvas. В этом нам поможет shadowOffsetX.



context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur = 5;
    context.shadowColor = "rgba(0, 0, 0, 1)";


Эффект тень для текста canvas

Тень можно настроить для любого угла или цвет тени как вам нравится.

Изображение и видео canvas

Canvas работает не только с изображениями но и с видео тоже. Вопрос, почему бы не использовать стандартный <img alt=»»> элемент? есть одна главная функция для работы с изображениями и видео, и это DrawImage.



var image = document.getElementById("mySheep");
    context.drawImage(image, 10, 10, 128, 128);






<img id="mySheep" src=
http://www.pixelcom.crimea.ua/"sheep.png" style="display:none;" />


Этот код рисует овцу в canvas.

Рисует овецу в canvas

Изображение теперь можно поворачивать, перевернуть, обесцветить.

Видео в canvas работает так же. Прежде всего, необходимо использовать элемент видео HTML5. Уже есть много прикрепленных функций к этому элементу. Элемент HTML5 видео содержит атрибут, который определяет, будет ли браузер отображать стандартный набор контроля над видео, а также цикл, который говорит браузеру, что видео является рекурсивным. Внутри видео ничего нового, но когда вы объедините элемент видео с canvas можно придумать удивительные вещи.

Canvas и видео в HTML.



<canvas id="myCanvas"> </canvas>
<video id="myVideo" controls loop>
    <source src=
http://www.pixelcom.crimea.ua/"video.webm" type="video/webm">
    <source src=
http://www.pixelcom.crimea.ua/"video.ogg" type="video/ogg">
    <source src=
http://www.pixelcom.crimea.ua/"video.mp4″ type="video/mp4″>
</video>


Не так много, правда? Видео будет работать в тегах видео, но нам надо сделать видео в canvas и расположить видео по центру canvas. Результат удивительный. Вот код.



var canvas = function () {
    return {
    draw: function () {
    var video = document.getElementById("myVideo");
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var width = Math.floor(canvas.clientWidth / 100);
    var height = Math.floor(canvas.clientHeight / 100);
    canvas.width = width; canvas.height = height;
    video.play();
    context.drawImage(video, 0, 0, width, height);
    },
    init: function () {
    setInterval(canvas.draw, 16);
    }
    }
    } ();


Весь фокус в том, чтобы сделать работу видео рекурсивно в canvas, это можно будет сделать только один раз. Вот почему вызывается setInterval при загрузке страницы.

Преобразования и анимация

Вот некоторые из соответствующих свойств и функций для выполнения преобразования.

  • scale(x, y) — изменения матрицы преобразования для применения масштабного преобразования с заданными характеристиками
  • rotate(angle) — изменения матрицы преобразования, чтобы применить преобразование поворота с заданными характеристиками
  • translate(x, y) — изменения матрицы преобразования применить перевод преобразования с заданными характеристиками
  • transform(m11, m12, m21, m22, dx, dy) — изменения матрицы преобразования применить матрицу c аргументом
  • setTransform(m11, m12, m21, m22, dx, dy) — изменения матрицы преобразования к матрице с аргументом.

Преобразования и анимация может работать отдельно, но если вы объедините их, как показано дальше, они могут сделать мощные визуальные эффекты. Начнем с вращения, повернём и будем вращать контекст в canvas. В следующем примере демонстрируется рисование прямоугольника каждые 250 миллисекунд, и каждый прямоугольник поворачивается, как эффект вращающегося колеса. Цвет рандомизированный, для получения блестящего эффекта.



var can = function () {
    var canvas;
    var context;
    return {
    draw: function () {
    var r = Math.floor(Math.random() * 255) + 70;
    var g = Math.floor(Math.random() * 255) + 70;
    var b = Math.floor(Math.random() * 255) + 70;
    var s = 'rgba(' + r + ',' + g + ',' + b + ', 0.5)';
    context.rotate(0.2 * Math.PI);
    context.fillStyle = s;
    context.fillRect(10, 0, 150, 50);
    },
    init: function () {
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    context.translate(200, 250);
    setInterval(can.draw, 250);
    }
    }
    } ();
    window.onload = can.init;


Результат.

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



var can = function () {
    var canvas;
    var context;
    var x = 0;
    var y = 0;
    function currectX() {
    return x = x + 1;
    }
    function currectY() {
    return y = y + 1;
    }
    return {
    draw: function () {
    var r = Math.floor(Math.random() * 255) + 70;
    var g = Math.floor(Math.random() * 255) + 70;
    var b = Math.floor(Math.random() * 255) + 70;
    var s = 'rgba(' + r + ',' + g + ',' + b + ', 0.5)';
    context.fillStyle = s;
    context.scale(1.2,1.2);
    context.fillRect(currectX(), currectY(), 5, 5);
    },
    init: function () {
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    context.translate(0, 0);
    setInterval(can.draw, 1000);
    }
    }
    } ();
    window.onload = can.init;


Для сложной анимации, посмотрите на блестящие линии, которые создала группа W3C здесь . Более подробная информация о преобразованиях canvas, здесь .

Работа с мышью в canvas

Вы наверно уже догадались, работать с мышью в canvas можно. Как и любой элемент веб-страницы, вы можете вернуть х и у координаты мыши методами pageX и pageY.
Чтобы отслеживать курсор мыши в canvas, вот фрагмент кода.



var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    canvas.onmousemove = function (e) {
    var x = e.pageX = this.offsetLeft;
    var y = e.pageY = this.offsetTop;
    var div = document.getElementById("coords");
    div.innerHTML = "x: " + x + " y: " + y;
    };


В приведенном выше примере, прикреплено событие захвата движения мыши, поэтому, когда курсор движется, х и у координаты выводятся на веб-странице. Сложнее сделать canvas как лист бумаги, на котором можно рисовать.



var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillCircle = function (x, y, radius, fillColor) {
    this.fillStyle = fillColor;
    this.beginPath();
    this.moveTo(x, y);
    this.arc(x, y, radius, 0, Math.PI * 2, false);
    this.fill();
    };
    context.clearTo = function (fillColor) {
    context.fillStyle = fillColor;
    context.fillRect(0, 0, canvas.width, canvas.height);
    };
    context.clearTo("#ddd");
    canvas.onmousemove = function (e) {
    if (!canvas.isDrawing) return;
    var x = e.pageX = this.offsetLeft;
    var y = e.pageY = this.offsetTop;
    var div = document.getElementById("coords");
    div.innerHTML = "x: " + x + " y: " + y;
    var radius = 10;
    var fillColor = '#ff0000';
    context.fillCircle(x, y, radius, fillColor);
    };
    canvas.onmousedown = function (e) {
    canvas.isDrawing = true;
    };
    canvas.onmouseup = function (e) {
    canvas.isDrawing = false;
    };


К JavaScript можно добавить элемент canvas и добавить пользовательские обработчики событий для обработки движения мыши.

Заключение

Это не большая не полная запись в виде урока, знайте что эти необычные эффекты полностью работают в современных браузерах. Присылайте нам ваши эскизы, возможно они займут первое место на нашем сайте.

3 комментария на тему “Руководство по HTML5 Canvas”

  1. комментарии

    Спасибо за статью, очень много информации, с примерами, и что самое главное — собрана в одном месте!

  2. комментарии

    «Весь canvas из состоит из пикселей. »
    По моему здесь первое «из» лишнее

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://www.pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>