Прямые на HTML Canvas

实例

// Создать канвас:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Определить новую траекторию:
ctx.beginPath();
// Определить начало:
ctx.moveTo(0, 0);
// Определить终点:
ctx.lineTo(200, 100);
// Рисование:
ctx.stroke();

Попробуйте сами

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

Рисование линий использует траекторию на канвасе:

Метод

Метод beginPath() начинает новую траекторию. Он не рисует ничего, просто определяет новую траекторию.

Метод moveTo() определяет начало линии. Он не рисует ничего, просто устанавливает начало.

Метод lineTo() определяет конец линии. Он не рисует ничего, просто устанавливает终点.

Метод stroke() фактически рисует линию. По умолчанию цвет заливки черный.

Свойство lineWidth

Свойство lineWidth определяет ширину линии, используемой для рисования на канвасе.

Его необходимо установить перед вызовом метода stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Попробуйте сами

Свойство strokeStyle

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

Его необходимо установить перед вызовом метода stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Попробуйте сами

Свойство lineCap

Свойство lineCap определяет стиль конца линии (butt, round или square).

По умолчанию это square (квадрат).

Его необходимо установить перед вызовом метода stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Попробуйте сами

Дополнительная информация:

Полное руководство по Canvas на CodeW3C.com