Формы на HTML Canvas

实例

Пример 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

亲自试一试

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

линии рисуются с помощью траектории на канвасе:

Метод

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

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

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

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

Более примеров

Пример 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

亲自试一试

Пример 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

亲自试一试

Совет

Если вы хотите нарисовать прямоугольник, вам не нужно рисовать 4 линии.

в следующей главе вы узнаете, как использовать drawRect(); метод для рисования прямоугольника.

Свойство strokeStyle

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

должен быть вызван stroke(); до метода.

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

亲自试一试

ctx.stroke();

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