Как рисовать графику на 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(), чтобы правильно отобразить обводку.