Основы HTML5

API HTML5

Медиа HTML5

Графика HTML5

Градиенты на Canvas в HTML5 Очистка канваса в HTML5

Пути на Canvas в HTML5

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

Путь HTML5 Canvas - это серия точек, между которыми есть команды для рисования. Например, между серией точек есть прямая линия, или между ними есть дуга.

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

Начало и конец пути - Путь

Используйте функции 2D контекста beginPath() и.closePath() для начала и завершения пути, как показано ниже:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");context.beginPath();
// ... операции рисования пути
context.closePath();

moveTo();

При рисовании путей вы используете виртуальную «ручку» или «указатель». Этот виртуальный указатель всегда находится в определенной точке. Перемещение виртуального указателя с помощью функций 2D Context, как показано ниже:

context.moveTo(10,10);

Этот пример перемещает указатель в точку 10,10.

функция lineTo()

Функция lineTo() рисует линию от виртуального указателя до точки, переданной в качестве параметра функции lineTo(). Вот пример:

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

Этот пример перемещает указатель в точку 10,10, а затем рисует линию от этой точки до точки 50,50.

The lineTo() function also moves the virtual pointer to the end of the line. Therefore, in the above example, the pointer moves to 50,50, indicating that the canvas draws a line to that point.

stroke() + fill()

No path is actually drawn before you indicate the 2D context to draw a path. This operation is completed by calling stroke() or fill() on the 2D context.
The stroke() function draws the outline of the shape defined by path operations.
The fill() function fills the shape defined by path operations.
Here is an example of both applied to the same shape: stroke() and fill():

Example

<canvas id="ex1" width="500" height="75" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

Test to see ‹/›

This is the result of running the above code:

LineWidth

You can use the lineWidth property of the 2D context to set the width of various stroke functions for drawing lines. Here is an example:

context.lineWidth = 10;

The above example sets the line width of all subsequent drawing operations to 10 pixels.
These are three lines with line widths of 1, 5, and 10 respectively:

When the line width is greater than 1, the additional width of the line is drawn outside the center line. That is, if you draw a line from 10,10 to 100,10 with a line width of 10, then the line will actually start at 10,5 and extend to 10,15, and then horizontally extend to 100,5 and 100,15 from there. Like a rectangle.

Line cap (lineCap)

При рисовании линий с помощью пути можно установить капы для线条. Капы определяют способ рисования конца строки.}
Ширина строки устанавливается свойством lineCap 2D контекста.它可以 принимать следующие значения:

butt
round
square

Значение butt приводит к тому, что конец строки плоский и перпендикулярен линии.
Значение round создает закругленный конец строки с радиусом, равным половине ширины строки.
Значение square приводит к рисованию прямоугольника в конце строки. Размер прямоугольника составляет ширина строки x ширина строки / 2.
Вот набор примеров для объяснения lineCap. Ширина всех линий составляет 10. Самая левая линия использует значение lineCap butt. Средняя линия использует значение lineCap round. Самая правая линия использует значение lineCap square

Значение butt и square может быть несколько трудно увидеть разницу с линией. Поэтому я создал несколько примеров с линией butt и square, которые рисуются близко друг к другу, чтобы вы могли видеть различия. Вверху или слева используется butt, внизу или справа используется square.

Как вы видите, использование значения lineCap square рисует дополнительный прямоугольник в конце строки, что делает строку немного длиннее.

Соединение линий (lineJoin)

Свойство lineJoin 2D контекста определяет, как рисовать точки соединения двух линий. Точка соединения двух линий называется "стыковка". Свойство lineJoin может принимать следующие значения:

miter
bevel
round

Вот три примера кода для установки стыковки строк:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

Значение miter приводит к рисованию углов для соединения линий.
Значение bevel приводит к рисованию углов для соединения линий.
Значение round приводит к рисованию закругленных углов для соединения линий.
Вот три примера (с левого): miter, bevel и round в качестве значения свойства lineJoin.

arc()

Функция arc() 2D контекста рисует дугу на канвасе.

Функция arc() принимает 6 параметров:

x: координата x центра дуги
y: координата y центра дуги
radius: Радиус дуги
startAngle: Угол радиана для начала дуги
endAngle: Угол радиана для завершения дуги
anticlockwise: Установить направление вставки в против часовой стрелки (не по часовой стрелке).

Это пример кода:

context.lineWidth = 3;
var x = 50;
var y = 50;
var　radius　=　25;
var radius = 25;
var startAngle = (Math.PI / 180) * 45;
var endAngle = (Math.PI / 180) * 90;
context.beginPath();
var anticlockwise = false;
context.stroke();
context.closePath();

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
Этот пример кода рисует дугу,圆心 в 50, 50,半径为 25 пикселей, от 45 градусов до 180 градусов. Вы, возможно, уже заметили, что углы от 0 до 360 градусов преобразуются в градусы.

Вот такой вид кода на холсте:

Чтобы нарисовать полный круг, просто установите startAngle в 0 и endAngle в 2 * Math.PI, равное (Math.PI / 180) * 360

функция arcTo()

2D контекст имеет однуфункция arcTo()но можно использоватьфункция lineTo()ичтобы имитировать его функциональностьarc()поэтому я его пропущу

quadraticCurveTo()

Функция quadraticCurveTo() рисует двукратную Bezier кривую от одной точки к другой. Эта кривая контролируется одной контрольной точкой. Вот пример кода:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 100;
var toY = 50;
var cpX = 75;
var cpY = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

Этот пример кода использует контрольные точки 75, 100 (cpX, cpY) для рисования кривой от 50, 50 до 100, 50. Результат кривой представлен следующим образом:

Маленькие точки на холсте - это контрольные точки, которые я нарисовал здесь. Обычно они не являются частью кривой

bezierCurveTo()

Функция bezierCurveTo() рисует三次 Bezier кривую от одной точки к другой. Трехкратная Bezier кривая имеет две контрольные точки, а двухкратная Bezier кривая имеет только одну контрольную точку. Вот пример кода:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 300;
var toY = 50;
var cp1X = 100;
var cp1Y = 100;
var cp2X = 250;
var cp2Y = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Этот пример кода использует контрольные точки 100, 100 (cp1X, cp1Y) и 250, 100 (cp2X, cp2Y) для рисования кривой от 50, 50 до 300, 50. Результат кривой представлен следующим образом:

Два маленьких的点 на холсте - это точки контроля, которые я нарисовал, чтобы показать вам их положение. Они не нарисованы как часть кривой.
Это пример использования различных точек старта, финиша и контрольных точек:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 300;
var toY = 50;
var cp1X = 100;
var cp1Y = 10;
var cp2X = 250;
var cp2Y = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Это соответствующая кривая:

Таким образом, две маленькие точки являются очевидными точками управления для моего отображения

Градиенты на Canvas в HTML5 Очистка канваса в HTML5