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

Question

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

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

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

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

Пример страницы в мгновение ока

Answer 1

Вы могли бы взглянуть на другую (хорошую) реализацию флиппера страниц на основе HTML5: http://jpageflipper.codeplex.com/

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

Answer 2

Это плагин JQuery и довольно изящный

http://www.turnjs.com/#home

Answer 3

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

Answer 4

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

Answer 5

см. http://www.20thingsilearned.com/home

Answer 6

Вот приложение HTML5 Page Flip, которое я создал с помощью HTML5 Canvas Element & jQuery. Это называется RectoVerso .

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

Answer 7

http://js1k.com/2010-first/demo/441
Как можно компактнее: D

Answer 8

http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 9

Это лучше сделать с элементом SVG <foreignObject> и преобразованиями SVG. Это сообщение в блоге Марка Финкла содержит некоторую информацию о вращающемся материале, что вам необходимо сделать в эффекте "перелистывание страницы" Насколько я знаю, только Gecko 1.9+ и WebKit поддерживают это.