Можно ли "перевернуть" рисунки на холсте?Любые другие обходные пути?

Question

У меня есть набор <canvas> элементов, которые я «переворачиваю», используя flip! . Моя проблема в том, что способ переворота работает, это переворачивает весь элемент <canvas>, и это создает не очень приятный эффект, когда он переворачивается ... Так что я пытаюсь добиться, чтобы "перевернуть" так же, как перевернуть ! делает, но в пределах холста. Или есть другие известные способы обхода?

Вот небольшой пример того, что я пытаюсь сделать: http://jsfiddle.net/hnqB6/4/.

Я хотел бы перевернуть черные треугольники, но когда я использую метод flip из URL-адреса выше, он переворачивает весь элемент canvas, что создает не очень приятный эффект.

Я почти уверен, что вы можете просто перевернуть все изображение на холсте за секунду, но я также ищу всю анимацию. У кого-нибудь была эта проблема раньше?

Answer 1

Вы можете использовать CSS 3D-преобразования и переходы для выполнения анимации переворачивания карты на элементе canvas . переключение только части элемента canvas возможно только при программировании анимации с нуля, поскольку это будет включать в себя управление растровым изображением попиксельно. В качестве альтернативы, вы можете преобразовать саму матрицу холстов, но она требует гораздо больше работы, чем 3D-переход, в отношении анимации.