Use Canvas to achieve the effect of turning pages of an e-book.

The effect

The screenshot below

implementation

  • First, simulate the broken line when turning the page, cross the contact and contact and the vertical line connecting the lower right point, and the vertical line can not cross the spine of the book.
  • Map the pixels to the right of the line into a semi-cylindrical shape. It’s a half cylinder, but it’s just a 2D mapping of xy coordinates.
  • Add shadows to enhance the 3D effect.
  • The source code