Как сделать изображение HTML 5 Canvas "флип страницы", как вы обычно видите во Flash?

Кто-нибудь попытался воссоздать эффект flip страницы с изображениями, как вы обычно видите в Adobe Flash с тегом canvas JavaScript и HTML 5?

Существуют ли какие-либо фреймворки или плагины JQuery, которые выполняют этот тип эффекта?

Перелистывание страницы во Flash позволяет захватить угол моделируемой страницы книги и перевернуть страницу, как если бы вы перевернули страницу реальной книги.

Я действительно хочу узнать, как это сделать с JavaScript и HTML 5 тегом canvas, но не уверен, с чего начать, и какие формулы будут необходимы.

Пример страницы flip во flash

Ответы

Ответ 1

Возможно, вы посмотрите на другую (красивую) реализацию флиппера на основе HTML5: http://jpageflipper.codeplex.com/

Это действительно приятно и реализовано как плагин jQuery.

Ответ 2

Вы можете попробовать jFlip, это плагин jQuery, он не совместим с IE, но я думаю, это не проблема для вас с тех пор вы запрашиваете HTML5.

Ответ 4

Вот флип-приложение страницы HTML5, которое я создал с помощью HTML5 Canvas Element и jQuery. Он назывался RectoVerso.

Я также столкнулся с этим: http://romancortes.com/ficheros/page-flip.html
Это делается только с CSS3.

Ответ 6

Существует четкое и информативное исследование о создании собственного эффекта перевода страницы, основанного на значении 20 вещей, которые я узнал о браузерах и в Интернете, с которыми связан Narendrakumar. Его отличная реализация для подражания, тематическое исследование ясно с соответствующими образцами кода, и оно было написано старшим интерактивным разработчиком для компании Fi, компании, которая разработала книгу.

Ответ 9

Это лучше сделать с помощью SVG <foreignObject> и SVG-преобразований. В этом блоге Mark Finkle есть информация о вращающемся материале, как вам нужно будет сделать в эффекте "flip/turn" страницы. Насколько мне известно, только Gecko 1.9+ и WebKit поддерживают это.