开始制作.docx

1、开始制作开始制作本教程会带领里学习html5电子书的制作流程，并教你用Canvas元素和JavaScript来制作自己的电子书。关于JavaScript的基础代码，如变量声明和事件侦听等不在本教程的范围内，具体请参考实例源代码。开始之前，我们还是先看一下demo的效果吧，这样我们可以有目的行的去学习。电子书结构你一定要时时记住，在canvas里绘制的所有信息都无法被搜索引擎搜到，也无法由用户在浏览器中搜索到。由于这个原因，我们在DOM中显示文本内容，然后由JavaScript来操控它。所以电子书的结构非常简单：XML/HTML Code复制内容到剪贴板1. 2. 3. 4. 5. 6. 7.

2、8. 9. 10. 11. 12. 13. 14. !- More s here - 15. 16. 17. 18. 复制代码电子书的结构中包含一个主容器，它包含所有的页面和用来绘制翻页效果的canvas元素。在section元素中包含一个div元素，它包含了电子书页面的内容，我们可以调整这个div的宽度而不影响页面内容的布局。div有固定的宽度，同时section设置溢出隐藏，这样section元素的作用实际是作为div的水平方向的遮罩。打开电子书，可以看到一个背景图片，它包含纸张的材质和书籍效果。逻辑实现翻页效果的代码并不是很复杂，但代码量很大，因为有很多图形效果需要用代码实现。首先我们从

3、代码中的常量开始说起，它的使用贯穿整个程序。1. var BOOK_WIDTH = 830; 2. 3. 4. var BOOK_HEIGHT = 260; 5. 6. var PAGE_WIDTH = 400; 7. 8. var PAGE_HEIGHT = 250; 9. 10. var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2; 11. 12. var CANVAS_PADDING = 60;复制代码CANVAS_PADDING是canvas周围的留白，这样在翻页的时候页面可以超出书的尺寸。要注意的是，这里设置的常量有的也在CSS中设置了这些值

4、，所以如果你想修改书的尺寸，同样需要修改CSS中相应的值。贯穿代码中的常量，用来跟踪鼠标交互并绘制翻页页面，下一步需要为每个页面定义一个flip对象，在翻页交互过程中，它会持续更新来反应当前翻页的状态。1. / Create a reference to the book container element 2. 3. 4. var book = document.getElementById( book ); 5. 6. 7. 8. / Grab a list of all section elements (pages) within the book 9. 10. var pages =

5、 book.getElementsByTagName( section ); 11. 12. 13. 14. for( var i = 0, len = pages.length; i len; i+ ) 15. 16. pages.style.zIndex = len - i; 17. 18. 19. 20. flips.push( 21. 22. progress: 1, 23. 24. target: 1, 25. 26. page: pages, 27. 28. dragging: false 29. 30. ); 31. 32. 复制代码首先我们要保证section元素的z-inde

6、x被有序的排列，这样页面才可以正确的排序，也就是说第一页在上面，最后一页在最下面。flip对象最重要的属性是progress和target值。它们用来定义翻动页面折叠的大小，-1表示整页翻到左边，0表示翻到书的中间位置，+1表示整页翻到书的最右边。Progress和target值用来定义页面的折叠量，可以是-1到+1之间的值.现在每个页面都有自己的flip对象了，下面我们学获取用户的鼠标位置，并根据这个值开始翻页。1. function mouseMoveHandler( event ) 2. 3. 4. / Offset mouse position so that the top of t

7、he book spine is 0,0 5. 6. mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 ); 7. 8. mouse.y = event.clientY - book.offsetTop; 9. 10. 11. 12. 13. 14. function mouseDownHandler( event ) 15. 16. / Make sure the mouse pointer is inside of the book 17. 18. if (Math.abs(mouse.x) PAGE_WIDTH) 1

8、9. 20. if (mouse.x = 0) 21. 22. / We are on the left side, drag the previous page 23. 24. flipspage - 1.dragging = true; 25. 26. 27. 28. else if (mouse.x 0 & page + 1 flips.length) 29. 30. / We are on the right side, drag the current page 31. 32. flipspage.dragging = true; 33. 34. 35. 36. 37. 38. 39

9、. 40. / Prevents the text selection 41. 42. event.preventDefault(); 43. 44. 45. 46. 47. 48. function mouseUpHandler( event ) 49. 50. for( var i = 0; i flips.length; i+ ) 51. 52. / If this flip was being dragged, animate to its destination 53. 54. if( flips.dragging ) 55. 56. / Figure out which page

10、we should navigate to 57. 58. if( mouse.x 0 ) 59. 60. flips.target = -1; 61. 62. page = Math.min( page + 1, flips.length ); 63. 64. 65. 66. else 67. 68. flips.target = 1; 69. 70. page = Math.max( page - 1, 0 ); 71. 72. 73. 74. 75. 76. 77. 78. flips.dragging = false; 79. 80. 81. 82. 复制代码mouseMoveHand

11、ler方法会实时更新mouse对象的内容，这样我们可以得到鼠标的精确位置。在mouseDonwHandler中，检测鼠标是在书的左边还是右边按下，记得得知翻页的方向。我还需要知道翻页方向的下一张是否还有页面，因为我们会遇到第一页或最后一页的情况。如果所有的flip选项都有检测没有问题，设置该flip对象的dragging属性为true。在mouseUpHandler中，我们会检测每个页面是否被拖动，如果是则释放该页面的拖动。停止拖动后，页面会根据鼠标的位置决定是向前翻动还是向后翻动。同时页面的页面也会被更新，作为页面的导航。渲染现在大部分的逻辑运算都已经完成了，下面我们要学习如果在canvas

12、元素中渲染折叠的页面。这些渲染的效果大部分都在render()方法中完成，这个方法每秒钟会执行60次，来实时更新翻动页面的状态。1. function render() 2. 3. 4. / Reset all pixels in the canvas 5. 6. context.clearRect( 0, 0, canvas.width, canvas.height ); 7. 8. 9. 10. for( var i = 0, len = flips.length; i len; i+ ) 11. 12. var flip = flips; 13. 14. 15. 16. if( flip

13、.dragging ) 17. 18. flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 ); 19. 20. 21. 22. 23. 24. / Ease progress towards the target value 25. 26. flip.progress += ( flip.target - flip.progress ) * 0.2; 27. 28. 29. 30. / If the flip is being dragged or is somewhere in the middle 31. 32.

14、 / of the book, render it 33. 34. if( flip.dragging | Math.abs( flip.progress ) 0.997 ) 35. 36. drawFlip( flip ); 37. 38. 39. 40. 41. 42. 43. 44. 复制代码开始渲染之前，用clearRect(x,y,w,h)方法重置canvas。重置整个canvas画布会大大降低运行的性能，相比之下，仅仅重置需要重新绘制的部分，效率会更高。但是为了不偏离本教程的话题，我们还是重置更个canvas画布。如果页面正在拖动，那么他的target值设置为鼠标坐标相对于电子书宽

15、度的位置，而不是实际的像素值。同时progress也会一点点增加至target值，这样翻动每帧都会更新，也就得到了我们看到的页面平滑的翻动动画效果。因为每一帧都要遍历所有的页面，所以我们需要保证只重绘当前活动的页面。如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%)，或者页面的flagged属性值是dragging，我们认为该页面是当前活动的页面。现在所有的逻辑运算都已经完成了，下面需要根据页面的当前状态绘制翻动页面效果。我们来看胰腺癌drawFlip()方法的第一部分。1. / Determines the strength of the fold/bend on a 0-1

16、range 2. 3. 4. var strength = 1 - Math.abs( flip.progress ); 5. 6. 7. 8. / Width of the folded paper 9. 10. var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress ); 11. 12. 13. 14. / X position of the folded paper 15. 16. var foldX = PAGE_WIDTH * flip.progress + foldWidth; 17. 18. 19. 20. / How

17、 far outside of the book the paper is bent due to perspective 21. 22. var verticalOutdent = 20 * strength; 23. 24. 25. 26. / The maximum widths of the three shadows used 27. 28. var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0); 29. 30. var rightShadowWidth = (P

18、AGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0); 31. 32. var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0); 33. 34. 35. 36. / Mask the page by setting its width to match the foldX 37. 38. flip.page.style.width = Math.max(foldX, 0) + px; 复制代码这部分的代码开始是一些变量的计算，它们用来绘制真实

19、的页面翻动效果。Progress变量在这些变量中扮演最重要的角色，因为它是页面要翻动到的位置。为了添加深度效果，我们让页面可以超出书的边界，当页面翻动至书脊位置时，超出部分达到了极限。页面翻动时的折叠效果.现在所有的值都一个就位，万事俱备，只差绘制页面了！1. context.save(); 2. 3. 4. context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING ); 5. 6. 7. 8. / Draw a sharp shadow on the left side of the pag

20、e 9. 10. context.strokeStyle = rgba(0,0,0,+(0.05 * strength)+); 11. 12. context.lineWidth = 30 * strength; 13. 14. context.beginPath(); 15. 16. context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5); 17. 18. context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5); 19. 20. context.

21、stroke(); 21. 22. 23. 24. / Right side drop shadow 25. 26. var rightShadowGradient = context.createLinearGradient(foldX, 0, 27. 28. foldX + rightShadowWidth, 0); 29. 30. rightShadowGradient.addColorStop(0, rgba(0,0,0,+(strength*0.2)+); 31. 32. rightShadowGradient.addColorStop(0.8, rgba(0,0,0,0.0); 3

22、3. 34. 35. 36. context.fillStyle = rightShadowGradient; 37. 38. context.beginPath(); 39. 40. context.moveTo(foldX, 0); 41. 42. context.lineTo(foldX + rightShadowWidth, 0); 43. 44. context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT); 45. 46. context.lineTo(foldX, PAGE_HEIGHT); 47. 48. context.fill(

23、); 49. 50. 51. 52. / Left side drop shadow 53. 54. var leftShadowGradient = context.createLinearGradient( 55. 56. foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0); 57. 58. leftShadowGradient.addColorStop(0, rgba(0,0,0,0.0); 59. 60. leftShadowGradient.addColorStop(1, rgba(0,0,0,+(strengt

24、h*0.15)+); 61. 62. 63. 64. context.fillStyle = leftShadowGradient; 65. 66. context.beginPath(); 67. 68. context.moveTo(foldX - foldWidth - leftShadowWidth, 0); 69. 70. context.lineTo(foldX - foldWidth, 0); 71. 72. context.lineTo(foldX - foldWidth, PAGE_HEIGHT); 73. 74. context.lineTo(foldX - foldWid

25、th - leftShadowWidth, PAGE_HEIGHT); 75. 76. context.fill(); 77. 78. 79. 80. / Gradient applied to the folded paper (highlights & shadows) 81. 82. var foldGradient = context.createLinearGradient( 83. 84. foldX - paperShadowWidth, 0, foldX, 0); 85. 86. foldGradient.addColorStop(0.35, #fafafa); 87. 88.

26、 foldGradient.addColorStop(0.73, #eeeeee); 89. 90. foldGradient.addColorStop(0.9, #fafafa); 91. 92. foldGradient.addColorStop(1.0, #e2e2e2); 93. 94. 95. 96. context.fillStyle = foldGradient; 97. 98. context.strokeStyle = rgba(0,0,0,0.06); 99. 100. context.lineWidth = 0.5; 101. 102. 103. 104. / Draw

27、the folded piece of paper 105. 106. context.beginPath(); 107. 108. context.moveTo(foldX, 0); 109. 110. context.lineTo(foldX, PAGE_HEIGHT); 111. 112. context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), 113. 114. foldX - foldWidth, PAGE_HEIGHT + verticalOutdent); 115. 116. context.lin

28、eTo(foldX - foldWidth, -verticalOutdent); 117. 118. context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0); 119. 120. 121. 122. context.fill(); 123. 124. context.stroke(); 125. 126. 127. 128. context.restore(); 复制代码在canvas的API中tranlate(x,y)方法用来移动画布的坐标系统，以便于我们可以以书脊的顶端作为(0,0)原点来绘制翻动的页面。注意，我们需

29、要使用save()方法保存当前canvas的变换，变换完成后调用restore()方法。绘制翻动页面的起始点，同translate(x,y)方法，将其从canvas的左上角移动到书脊顶端，这样简化了绘制的逻辑foldGradient方法用来填充折叠的页面，同时绘制真实的高光和阴影效果。同时我还为页面绘制了一条很窄的黑边，防止在较亮的背景下页面“消失”。现在剩下的就是用我们前面定义的变量绘制折叠的页面。页面左右两侧用直线绘制，顶部和底部绘制弯曲的曲线，产生一种纸张折叠的感觉。页面的折叠程度由verticalOutdent值决定。全文结束！现在你得到的是一个完整的HTML5电子书。翻书实例Demo翻页效果是为了像用户传递正确的翻页体验，所有本教程中的图片无法让你感受到效果，点击下面的链接体验一下最终的结果。下一步如果本教程中的电子书加上一个硬书皮，会使它在翻页的基础上，给人带来更好的阅读体验