canvas-move-cursor.md

title	layout	categories	pubDate	description	keywords
Перемещение курсора в Canvas	../../layouts/ArticleEntry.astro	javascript canvas	2024-02-25	Перемещение курсора в Canvas	javascript, canvas

Перемещение курсора полезно, когда вы хотите начать новый путь или перейти к другой части холста без создания видимой линии. Метод moveTo() используется для управления позицией, откуда начинается рисование. Он позволяет перемещать "курсор" по холсту без рисования линии.

Синтаксис:

moveTo(x, y);

Параметры:

x	Координата X новой позиции курсора.
y	Координата Y новой позиции курсора.

Пример:

// Начинаем новый путь
ctx.beginPath();

// Перемещаем "курсор" в точку (50, 50)
ctx.moveTo(50, 50);

// Добавляем линию от текущей позиции до указанной точки (100, 100)
ctx.lineTo(100, 100);

// Закрываем путь
ctx.closePath();

// Рисуем контур пути
ctx.strokeStyle = 'blue'; // Цвет контура
ctx.lineWidth = 2; // Толщина линии
ctx.stroke();

Результат:

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/MWxqwLb?default-tab=result" width="100%"></iframe>

Cтатьи про Canvas

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