Краткое руководство: рисование на полотне (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

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

Это руководство содержит следующие разделы:

• Необходимые условия
• Полотно
• Контексты прорисовки
• Рисование прямоугольников
• Использование путей
• Рисование дуг
• Рисование кривых
• Кривая второго порядка
• Кривая Безье третьего порядка
• Следующие действия

Необходимые условия

В этом разделе предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript, используя шаблон из библиотеки Windows для JavaScript, и что у вас есть базовое понимание HTML и JavaScript. Инструкции по созданию первого приложения Магазина Windows на JavaScript см. в разделе о создании первого веб-приложения. Инструкции по использованию шаблонов WinJS см. в разделе "Получение и использование набора средств WinJS".

Полотно

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

Элемент полотна имеет атрибуты ширины и высоты. Оба атрибута не обязательны и могут быть заданы с помощью свойств модели DOM. Если вы не задали атрибуты ширины и высоты, при отображении полотна используются размеры по умолчанию: 300 пикселей по ширине и 150 пикселей по высоте.

<canvas id="canvas" width="150" height="150"></canvas>

Атрибут идентификатора не является частью элемента полотна, но он используется для идентификации элемента полотна в вашем сценарии.

Вы можете задать размер полотна с помощью каскадных таблиц стилей (CSS). По умолчанию ваше приложение прорисовывает элемент полотна без содержимого и без границ, т. е. абсолютно прозрачным. При желании вы можете задать для него нужный стиль так же, как для любого обычного изображения, указав поля, границу, фон и т. д. Изменение стиля не повлияет на фактический рисунок на полотне.

Контексты прорисовки

Добавление элемента полотна в ваше приложение создает только прозрачную поверхность для рисования. Чтобы рисовать на полотне, вам нужно получить контекст прорисовки полотна и использовать его для рисования. Есть разные типы контекстов прорисовки, позволяющие рисовать разными способами. Например, для двухмерной графики используется двухмерный контекст, а для трехмерной графики — трехмерный контекст. В примере этого раздела используется двухмерный контекст.

Чтобы получить контекст прорисовки, вызовите метод полотна getContext, как показано в следующем примере.

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

В нашем примере мы начинаем с использования метода getElementById, чтобы получить узел модели DOM для полотна, а затем используем метод getContext для доступа к контексту прорисовки. В методе getContent учитывается один параметр — тип контекста. В нашем примере это "2d".

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

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

Для рисования прямоугольников на полотне можно использовать две функции.

• fillRect

  fillRect (x, y, width, height)

  Далее описан метод для рисования закрашенного прямоугольника.

  Параметры x, y — это координаты, определяющие расположение прямоугольника на полотне. Они указываются относительно левого верхнего угла полотна. Ширина и высота измеряются в пикселях.

• strokeRect

  strokeRect(x, y, width, height)

  Параметры strokeRect те же, что и для метода fillRect. Различие заключается в том, что метод strokeRect рисует только контур прямоугольника.

Далее описан метод для закрашивания заданной фигуры.

• fillStyle

  fillStyle = color

  Метод fillStyle использует один параметр, определяющий цвет закрашиваемой фигуры. Цвет можно задать, используя схему RGB, заранее определенный цвет, например "красный", "синий" и другие, шестнадцатеричный цвет и даже градиент. Примеры использования метода fillStyle описаны ниже.

Это метод для очистки указанной области. Область становится полностью прозрачной.

• clearRect

  clearRect(x, y, width, height)

  Как и в методах fillRect и strokeRect, параметры x и y clearRect определяют расположение прямоугольной области, которую нужно очистить, а также задают ее ширину и высоту.

Пример

Начнем с примера, в котором создается полотно с двумя заполненными квадратами — золотым и прозрачным фиолетовым. Таблицы CSS будут использоваться для создания черной границы вокруг полотна.

Пример начинается с объявления элемента полотна в разделе <body> HTML-документа. Элементу полотна назначается атрибут идентификатора с именем "canvas", атрибуты высоты и ширины элемента устанавливаются равными 100 пикселям.

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

Создается элемент полотна шириной в один пиксель со сплошной черной границей, заданной на CSS. Чтобы сделать загрузку файла максимально эффективной, спецификация CSS должна содержаться во внешнем файле.

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

Код JavaScript, который позволяет нарисовать два заполненных прямоугольника на полотне, также содержится во внешнем файле. После загрузки HTML-документа с использованием обработчика событий загрузки окна вызывается функция рисования.

window.onload = draw;

Метод рисования получает элемент полотна с использованием метода getElementById. Далее вызывается метод getContext для получения контекста прорисовки. Вы должны передать методу getContext строку "2d".

У каждого полотна есть контекст прорисовки. В контексте прорисовки определяются все методы и свойства рисования.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

Чтобы нарисовать первый квадрат, установим цвет для fillStyle. Есть несколько способов заполнить прямоугольник. В нашем примере используется RGB-значение для золотого цвета:

context.fillStyle = "rgb(255, 215, 0)";

Далее приводятся другие способы установить fillStyle.

• Если существуют предопределенные цвета, например "желтый", "оранжевый", "фиолетовый" и т. д., вы можете их использовать.

  context.fillStyle = "gold";

• Или используйте шестнадцатеричное представление цвета в виде #RRGGBB:

  context.fillStyle = "#FFD700";

  Это шестнадцатеричное число задает глубокий золотой цвет.

• Градиент не является цветом, но его также можно использовать в методе fillStyle:

  var myGradient=context.createLinearGradient(20, 20, 100, 0);
  
  myGradient.addColorStop(0,"goldenrod");
  myGradient.addColorStop(1,"white");
  
  context.fillStyle = myGradient;
  

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

  

• Значением по умолчанию для fillStyle является сплошной черный.

Далее мы нарисуем прямоугольник, используя метод fillRect. Метод fillRect с заданными значениями позволяет нарисовать заполненный прямоугольник с координатами x и y левого верхнего угла, равными 15 и 15. Координаты x и y задаются относительно левого верхнего угла полотна. Для ширины и высоты прямоугольника заданы значения 55 и 50 пикселей соответственно:

context.fillRect (15, 15, 55, 50);

Для второго прямоугольника fillStyle устанавливает RGB-значение, эквивалентное фиолетовому цвету. Четвертое значение "А" или "Альфа" в системе RGBA устанавливается равным 0,5 и определяет прозрачность цвета. Допустимые значения для "Альфа" находятся в интервале от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный):

context.fillStyle = "rgba(0, 0, 200, 0.5)"

Метод fillRect с заданными значениями позволяет нарисовать прямоугольник с координатами x и y левого верхнего угла, равными 40 и 40. Для ширины и высоты прямоугольника заданы значения 45 и 40 пикселей соответственно:

context.fillRect (40, 40, 45, 40);

Далее представлен полный код примеров:

Это код JavaScript. В нашем примере этот файл будет назван myJavascript.js:

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

Это HTML-файл:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js" defer="defer"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="100" height="100" />
    </body>
</html>

Использование путей

Метод beginPath обеспечивает создание нового пути и использование дополнительных методов, таких как moveTo, lineTo или arc, для рисования комбинации линий, кривых и других фигур.

После создания пути вы можете использовать методы fillStyle или strokeStyle для прорисовки пути на полотне.

Пример

В этом примере будет нарисован коричневый треугольник.

Мы будем использовать те же файлы HTML и CSS, с помощью которых был выполнен первый пример. В файле myJavascript.js будем использовать ту же функцию рисования и будем вызывать ее после загрузки HTML.

Получив элемент полотна и определив типа полотна как двухмерное, рисуем коричневый треугольник, вызвав метод beginPath.

context.beginPath();

Пути хранятся в виде списка подконтуров (линий, дуг и т. д.), вместе образующих фигуру. Каждый раз при вызове метода beginPath список сбрасывается, и мы можем начать рисовать новые фигуры.

Прежде чем рисовать любую линию, вам нужно вызвать функцию moveTo. Функция moveTo ничего не рисует. Ее действие напоминает установку пера или карандаша в том месте, где планируется нарисовать треугольник.

context.moveTo(28, 20);

Функция moveTo использует два аргумента — координаты x и y. Здесь координате x присваивается значение 28, а координате y — значение 20. Координаты задаются относительно границы полотна, на котором вы рисуете.

Теперь с использованием функции lineTo рисуем линии треугольника. Подобно функции moveTo, функция lineTo имеет два аргумента — координаты x и y, которые являются конечными точками рисуемой линии.

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20); 

В нашем примере мы присваиваем свойству fillStyle шестнадцатеричное значение коричневого цвета. Как указано в разделе "Рисование прямоугольников", свойство fillStyle может быть задано с помощью схемы RGB, шестнадцатеричного цвета, заранее определенного цвета или градиента.

context.fillStyle = "#996633";

Чтобы нарисовать треугольник сплошным коричневым, используем метод fillStyle. Можно использовать функцию strokeStyle, которая будет рисовать только контур фигуры.

Теперь рисуем треугольную фигуру.

context.fill();

Далее представлен полный код JavaScript.

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();  

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

Для рисования дуг или окружностей мы используем метод arc:

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

В этом методе учитывается пять параметров:

• X и y — координаты центра окружности.
• Радиусом считается расстояние от центра окружности до любой точки на ней.
• Параметры startingAngle и endingAngle определяют начальную и конечную точки дуги, выраженные в радианах относительно оси x.
• Параметр anticlockwise имеет логический тип. Если он выполняется, дуга должна рисоваться против часовой стрелки, в противном случае — по часовой стрелке.

Пример

В этом примере мы нарисуем синюю окружность.

Получив элемент полотна и определив тип полотна как двухмерный, рисуем окружность, вызвав метод beginPath.

context.beginPath();

В предыдущих примерах для прямоугольника и треугольника при закрашивании фигур использовалась функция fillStyle. В этом примере мы задаем синий цвет по схеме RGB и рисуем только контур круга, используя метод strokeStyle.

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

Функция дуги определяется так:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

Где:

• Координаты x и y определяют центр окружности в точке 50, 50.
• Радиус окружности равен 32.
• Начальная и конечная точки соответствуют 0 и "2 * Math.PI" радиан, что дает полную окружность.
• Параметр движения против часовой стрелки anticlockwise выполняется. Это не важно при рисовании окружности, но необходимо указывать для дуги.

Наконец, чтобы нарисовать определенную нами окружность, используем функцию stroke:

// draw the circle.
context.stroke();

Далее представлена только половина окружности, т. е. дуга от 0 до Math.PI:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

Далее приведен код JavaScript. Этот код также будет содержаться в функции рисования, которая вызывается после загрузки HTML-страницы. Полный пример файлов HTML и JavaScript см. в разделе "Рисование прямоугольников".

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

Рисование кривых

Кривые используются для рисования сложных фигур. Есть два вида кривых: кривая Безье (кривая третьего порядка) и quadratic. Для обоих видов кривых начальная и конечная точки располагаются на полотне, а вид самой кривой зависит от заданных контрольных точек. Для рисования кривой quadratic используется одна контрольная точка, а для рисования кривой Безье третьего порядка — две точки. Путь всегда включает в себя кривые.

Кривая второго порядка

Далее представлен метод quadraticCurveTo:

quadraticCurveTo(cp1x, cp1y, X, Y)

Четырьмя параметрами являются две пары координат X и Y: первая пара cp1x и cp1y определяет положение контрольной точки на кривой, а вторая пара определяет конечную точку кривой.

Как и для других фигур, рисование кривой начинается с вызова метода moveTo(x, y), который задает координаты x и y для начальной точки кривой.

От конечных точек к контрольной точке рисуются две воображаемые касательные. Кривая рисуется в виде линии, огибающей касательные.

Пример

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

Начнем с получения элемента полотна и определения типа полотна как двухмерного. Далее создаем путь, вызывая метод beginPath.

context.beginPath();

И задаем начальную точку первой кривой координатами x и y со значениями 75 и 25 соответственно.

context.moveTo(75, 25);

Каждая кривая quadratic определена так:

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

Заданные параметры определяют:

• cp1x
  Координату x контрольной точки.

• cp1y
  Координату y контрольной точки.

• x
  Координату x конечной точки кривой.

• y
  Координату y конечной точки кривой.

Обратите внимание, что важен порядок, в котором рисуются кривые. Вы можете удалить одну или две кривых либо поменять их местами, чтобы посмотреть, как строятся кривые.

Определим зеленый цвет, установив для fillStyle RGB-значение, соответствующее зеленому цвету.

context.fillStyle = "rgb(100, 200, 50)";

Наконец, фигура закрашивается с использованием функции fill.

context.fill();

Обратите внимание, что в этом и следующем примерах размер полотна увеличен и составляет 150 на 150 пикселей.

<canvas id="canvas" width="150" height="150" />

Далее приведен полный пример.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

Кривая Безье третьего порядка

Далее описывается метод bezierCurveTo.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

У метода шесть параметров — три пары координат X и Y: cp1x и cp1y определяют положение первой контрольной точки кривой, cp2x и cp2y определяют положение второй контрольной точки, а третья пара — конечной точки кривой.

Начальная точка кривой определяется координатами x и y, заданными в методе moveTo(x, y).

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

Пример

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

После того как мы получили элемент полотна и определили тип полотна как двухмерный, создаем путь, вызвав метод beginPath.

context.beginPath();

И задаем начальную точку первой кривой координатами x и y со значениями 75 и 25 соответственно.

context.moveTo(75, 25);

Каждая кривая Безье третьего порядка определена так:

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

Заданные параметры определяют:

• cp1x
  Координату x первой контрольной точки кривой Безье.

• cp1y
  Координату y первой контрольной точки кривой Безье.

• cp2x
  Координату x второй контрольной точки кривой Безье.

• cp2y
  Координату y второй контрольной точки кривой Безье.

• x
  Координату x конечной точки кривой.

• y
  Координату y конечной точки кривой.

Обратите внимание, что важен порядок, в котором рисуются кривые. Вы можете удалить одну или две кривых либо поменять их местами, чтобы посмотреть, как строятся кривые.

Определим красный цвет, задав для fillStyle RGB-значение, соответствующее красному цвету.

context.fillStyle = "rgb(200, 0, 0)";

Наконец, фигура закрашивается с использованием функции заполнения.

context.fill();

Обратите внимание, что в этом примере размер полотна увеличен и составляет 150 на 150 пикселей.

<canvas id="canvas" width="150" height="150" />

Далее представлен полный код примера:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

Следующие действия

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

Чтобы настроить методы fillRect и fillStyle для рисования прямоугольников, мы получили от элемента полотна двухмерный контекст рисования. Для закрашивания графики мы определяли параметры метода fillStyle разными способами: с помощью схемы RGB, шестнадцатеричного значения, заранее определенного цвета и градиента.

Мы посмотрели, как с использованием метода beginPath создается новый путь и используются дополнительные методы для рисования комбинации линий, окружностей и кривых, такие как moveTo, lineTo и arc.

Создав путь, мы использовали методы fillStyle и strokeStyle, чтобы прорисовать его на полотне.

Далее вы научитесь анимировать графику на полотне и создавать градиенты.

Анимирование графики на полотне

Создание градиента