HTML-холст преобразовать?это только: сначала делай трансформацию, а потом рисуешь на холсте?Нет, наклеить изображение или т. Д. На холст и преобразовать его?

Question

Моя цель состоит в том, чтобы ввести изображение в часть холста, затем масштабировать его, перемещать / переводить и, при необходимости, наклонять, а также вращать и вносить альфа-изменения, вид основных «манипуляций с 2D-изображениями», ванимированная форма, которая: делает небольшие изменения со временем от начального состояния до конечного состояния цели.

Что ж, я подумал, что это эффективно, я должен использовать контекстное преобразование canvas / 2d, https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform - как и первые 3: масштабировать, перемещать / переводить и наклонять «все в одном».Я сделал половину этого кода, и теперь я смотрю на примеры и пытаюсь отладить его.Все примеры, которые я вижу, это сделать 1) какое-то преобразование, кроме «преобразования единства»:

   { a:1, b:0, c: 0, d:1, e:0, f:0 }; // this basic transform does nothing

и затем 2) втягиваются в это.Но это порядок, противоположный тому, что я хочу: рисовать на холсте (изображении), а затем делать анимацию с течением времени, используя вышеуказанные основные изменения (масштабирование, перевод, наклон, поворот и альфа).У меня вопрос: это только «работает таким образом», то есть я должен сначала настроить (одиночное) преобразование на странице, а затем «втянуть в это?»

Надеюсь, нет ... это победило 'дайте мне то, что я хочу, и я должен «бросить это» и перейти к 5 отдельным «преобразованиям».Комментарии?

Answer 1

Да, это работает только таким образом, режимы преобразования холста и режима компоновки, а также фильтры, свойства lineWidth, fillStyle и т. Д. Применяются только к следующим операциям рисования.

Сам холст содержит только информацию о пикселях, он не имеет понятия нарисованного объекта. Ваш код js должен выполнить эту часть.

Так что для того, что вы хотите, вы можете просто перерисовать все каждый раз:

1. сбросьте преобразование, чтобы мы могли очистить ctx.setTransform(1,0,0,1,0,0);
2. Очистить холст ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
3. Установите преобразование для вашей новой матрицы ctx.translate(x,y); ctx.scale(s)...
4. Нарисуйте преобразованную графику ctx.fill(); ctx.drawImage(...
5. Ждите следующего кадра, чтобы сделать это снова requestAnimationFrame(update)