Свободный прямоугольник трансформирования на холсте JavaScript

Question

Я новичок в элементе холста JavaScript. Я только что начал несколько часов назад. Я работаю над свободным преобразованием прямоугольной части изображения. (Пример того, что я называю «свободным преобразованием», см. Это: http://www.html5.jp/test/perspective_canvas/demo1_en.html. Обратите внимание, что я не хочу позволять пользователю преобразовывать изображение с помощью ручек в качестве примера.)

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

function freeTransform(canvas, image, 
    startX1, startY1, startX2, startY2, startX3, startY3, startX4, startY4, 
    endX1, endY1, endX2, endY2, endX3, endY3, endX4, endY4) 

Но контекст холста не имеет этой функции (насколько я знаю). Кто-нибудь даст мне какое-то направление? Спасибо.

Answer 1

Вы правы.

Холст html не может преобразовать 1 угол прямоугольника, используя его общий контекст 2d.

Вы можете использовать «триангуляцию» деформировать изображение в холст 2d, чтобы придать ему перспективу:

http://tulrich.com/geekstuff/canvas/perspective.html

Вы можете получить ближе к перспективе преобразования с использованием 3D-контекст холста (WebGL).

Вы можете использовать непараллельное преобразование, чтобы деформировать изображение в WebGL, чтобы придать ему перспективу:

http://games.greggman.com/game/webgl-3d-perspective/