Получить path2D из холста

Как я могу получить path2D после того, как холст выполнил свои вычисления?

ctx.resetTransform()
ctx.translate(2, 2)
ctx.scale(2, 2)
ctx.beginPath()
ctx.moveTo(30, 50)
ctx.lineTo(150, 100)
ctx.strokeStyle = 'red'
ctx.stroke()
ctx.closePath()

//get path2D

javascript canvas

13.11.2022 11:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете. Текущий путь контекста по умолчанию является непрозрачным и внутренним объектом. Мы не можем получить к нему доступ через скрипты, и мы не можем ничего из него прочитать.
Что вы можете сделать, так это напрямую использовать объект Path2D.
Чтобы использовать текущее преобразование контекста, как вы делали в OP, вы можете использовать объект DOMMatrix и метод Path2D#addPath(path, matrix), который применит матрицу к добавленному пути:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const mat = new DOMMatrix()
  .translate(2, 2)
  .scale(2, 2);
const p1 = new Path2D();
p1.moveTo(30, 50);
p1.lineTo(150, 100);
const p2 = new Path2D();
p2.addPath(p1, mat);
ctx.strokeStyle = "red";
ctx.stroke(p2);

<canvas height=500></canvas>

Обратите внимание, что Path2D также является непрозрачным объектом (в настоящее время), и мы также не можем ничего прочитать из него. Если это то, что вы хотите (например, вернуть сегменты или определение пути SVG, то я приглашаю вас попробовать мой прототип проверки Path2d.

— 13.11.2022 12:28

13.11.2022 12:25