jivo banner 468x60jivo banner 728x90jivo banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180

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

Элемент HTML5 canvas можно использовать для рисования графики на веб-странице с помощью JavaScript. Холст (canvas) был изначально представлен Apple для виджетов панели управления Mac OS и для обеспечения графики в веб-браузере Safari. Позже его стали использовать Firefox, Google Chrome и Opera. Теперь canvas является частью новой спецификации HTML5 для веб-технологий следующего поколения.

По умолчанию элемент <canvas> имеет ширину 300 пикселей и высоту 150 пикселей без границ и содержимого. Однако пользовательские ширина и высота могут быть определены с помощью атрибутов height и width, а границы с помощью CSS-свойства border.

Установка координат Canvas

Canvas представляет собой двухмерную прямоугольную область. Координаты начинаются от верхнего левого угла холста (0, 0), который называют источник (origin) и заканчиваются нижним правым углом (canvas width, canvas height).

Элемент <canvas> поддерживается во всех основных веб-браузерах, таких как Chrome, Firefox, Safari, Opera, IE 9 и выше.

Рисование контура и фигур на Canvas

В этом разделе мы познакомимся с тем, как рисовать основные контуры и фигуры, используя недавно представленный элемент canvas и JavaScript.

Вот базовый шаблон для рисования контуров и фигур на 2D-холсте HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing on Canvas</title>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // draw stuff here
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

Анонимная функция, прикрепленная к событию window.onload, будет выполняться при загрузке страницы. После загрузки страницы мы можем получить доступ к элементу canvas с помощью метода document.getElementById(). Позже мы определили 2D-контекст холста, передав 2d в метод getContext() объекта canvas.

Рисование линии

Самый простой элемент, который вы можете нарисовать на canvas — это прямая линия. Наиболее важные методы, используемые для этого: moveTo(), lineTo() и stroke().

Метод moveTo() определяет позицию рисования курсора на холсте, а метод lineTo() используется для определения координат конечной точки, и, наконец, метод stroke() используется для отображения линии. Посмотрим пример:

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

Рисование дуги

Вы можете создавать дуги, используя метод arc(). Синтаксис этого метода следующий:

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

Код JavaScript в следующем примере нарисует дугу на холсте.

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

Рисование прямоугольника

Вы можете создавать прямоугольные и квадратные формы, используя метод rect(). Этот метод требует четырех параметров: координат x, y, ширину и высоту.

Основной синтаксис метода rect() может быть задан с помощью:

context.rect(x, y, width, height);

Следующий код JavaScript нарисует прямоугольную форму с центром на холсте.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.stroke();
    };
</script>

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

Не существует специального метода для создания круга. Однако вы можете создать полностью закрытую дугу используя метод arc().

Синтаксис для рисования полного круга с использованием метода arc() можно задать с помощью:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

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

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.stroke();
    };
</script>

Применение стилей и цветов для линий

По умолчанию цвет обводки установлен черный, а его толщина составляет один пиксель. Но вы можете установить цвет и ширину используя свойство strokeStyle и lineWidth соответственно.

В следующем примере будет нарисована оранжевая цветная линия шириной 5 пикселей.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 5;
        context.strokeStyle = "orange";
        context.moveTo(50, 150);
        context.lineTo(250, 50);
        context.stroke();
    };
</script>

Вы также можете установить стиль ограничения для линий, используя свойство lineCap. Есть три стиля, доступных для линии — butt, round, и square. Вот пример:

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "orange";
        context.lineCap = "round";
        context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
        context.stroke();
    };
</script>

Заполнение цветом внутри форм Canvas

Вы можете заполнить цветом форму canvas, используя метод fillStyle().

В следующем примере показано, как залить сплошным цветом прямоугольную форму.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

При стилизации фигур на холсте рекомендуется использовать метод fill() перед методом stroke(), чтобы правильно отобразить обводку (stroke).

Точно так же вы можете использовать метод fillStyle(), чтобы залить сплошным цветом круг.

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

Заполнение градиентным цветом форм Canvas

Вы также можете заполнить градиентным цветом форму canvas. Градиент — это просто плавный визуальный переход от одного цвета к другому. Существует два типа градиента — линейный и радиальный.

Основной синтаксис для создания линейного градиента может быть задан с помощью:

var grd = context.createLinearGradient(startX, startY, endX, endY);

В следующем примере метод createLinearGradient() используется для заливки линейным градиентом прямоугольника. Давайте попробуем разобраться, как это работает в принципе:

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100); 
        var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

Точно так же вы можете заполнить формы радиальным градиентом, используя метод createRadialGradient(). Основной синтаксис для создания радиального градиента может быть задан с помощью:

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

В следующем примере метод createRadialGradient() используется для заливки радиальным градиентом круга. Давайте попробуем разобраться, как это на самом деле работает:

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.arc(150, 100, 70, 0, 2 * Math.PI, false);
        var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
        grd.addColorStop(0, '#8ED6FF');   
        grd.addColorStop(1, '#004CB3');
        context.fillStyle = grd;
        context.fill();
        context.stroke();
    };
</script>

Рисование текста на Canvas

Вы также можете нарисовать текст на canvas. Текст может содержать любые символы Юникода. В следующем примере будет нарисовано простое приветственное сообщение «Hello World!».

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.fillText("Hello World!", 50, 100);
    };
</script>

Дополнительно вы можете установить цвет и выравнивание текста на холсте, например так:

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
    };
</script>

Вы также можете применить обводку к тексту, используя метод strokeText(). Этот метод будет окрашивать периметр текста, а не заполнять его. Однако если вы хотите установить как заливку, так и обводку текста, вы можете использовать оба метода fillText() и strokeText().

<script>
	window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.strokeStyle = "orange";
        context.strokeText("Hello World!", 150, 100);
    };
</script>

При оформлении текста на холсте рекомендуется использовать метод fillText() перед методом strokeText(), чтобы правильно отобразить обводку.

beget banner 480x320beget banner 728x90beget banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…
Подробнее

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…
Подробнее

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…
Подробнее