开始制作.docx
- 文档编号:6202574
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:15
- 大小:20.69KB
开始制作.docx
《开始制作.docx》由会员分享,可在线阅读,更多相关《开始制作.docx(15页珍藏版)》请在冰豆网上搜索。
开始制作
开始制作
本教程会带领里学习html5电子书的制作流程,并教你用Canvas元素和JavaScript来制作自己的电子书。
关于JavaScript的基础代码,如变量声明和事件侦听等不在本教程的范围内,具体请参考实例源代码。
开始之前,我们还是先看一下demo的效果吧,这样我们可以有目的行的去学习。
电子书结构
你一定要时时记住,在canvas里绘制的所有信息都无法被搜索引擎搜到,也无法由用户在浏览器中搜索到。
由于这个原因,我们在DOM中显示文本内容,然后由JavaScript来操控它。
所以电子书的结构非常简单:
XML/HTMLCode复制内容到剪贴板
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
--Anytypeofcontentshere-->
11.
12.
13.
14.
--More
15.
16.
17.
18.
复制代码
电子书的结构中包含一个主容器,它包含所有的页面和用来绘制翻页效果的canvas元素。
在section元素中包含一个div元素,它包含了电子书页面的内容,我们可以调整这个div的宽度而不影响页面内容的布局。
div有固定的宽度,同时section设置溢出隐藏,这样section元素的作用实际是作为div的水平方向的遮罩。
打开电子书,可以看到一个背景图片,它包含纸张的材质和书籍效果。
逻辑
实现翻页效果的代码并不是很复杂,但代码量很大,因为有很多图形效果需要用代码实现。
首先我们从代码中的常量开始说起,它的使用贯穿整个程序。
1.varBOOK_WIDTH=830;
2.
3.
4.varBOOK_HEIGHT=260;
5.
6.varPAGE_WIDTH=400;
7.
8.varPAGE_HEIGHT=250;
9.
10.varPAGE_Y=(BOOK_HEIGHT-PAGE_HEIGHT)/2;
11.
12.varCANVAS_PADDING=60;
复制代码
CANVAS_PADDING是canvas周围的留白,这样在翻页的时候页面可以超出书的尺寸。
要注意的是,这里设置的常量有的也在CSS中设置了这些值,所以如果你想修改书的尺寸,同样需要修改CSS中相应的值。
贯穿代码中的常量,用来跟踪鼠标交互并绘制翻页页面,下一步需要为每个页面定义一个flip对象,在翻页交互过程中,它会持续更新来反应当前翻页的状态。
1.//Createareferencetothebookcontainerelement
2.
3.
4.varbook=document.getElementById("book");
5.
6.
7.
8.//Grabalistofallsectionelements(pages)withinthebook
9.
10.varpages=book.getElementsByTagName("section");
11.
12.
13.
14.for(vari=0,len=pages.length;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-index被有序的排列,这样页面才可以正确的排序,也就是说第一页在上面,最后一页在最下面。 flip对象最重要的属性是progress和target值。 它们用来定义翻动页面折叠的大小,-1表示整页翻到左边,0表示翻到书的中间位置,+1表示整页翻到书的最右边。 Progress和target值用来定义页面的折叠量,可以是-1到+1之间的值.现在每个页面都有自己的flip对象了,下面我们学获取用户的鼠标位置,并根据这个值开始翻页。 1.functionmouseMoveHandler(event){ 2. 3. 4.//Offsetmousepositionsothatthetopofthebookspineis0,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.functionmouseDownHandler(event){ 15. 16.//Makesurethemousepointerisinsideofthebook 17. 18.if(Math.abs(mouse.x) 19. 20.if(mouse.x<0&&page-1>=0){ 21. 22.//Weareontheleftside,dragthepreviouspage 23. 24.flips[page-1].dragging=true; 25. 26.} 27. 28.elseif(mouse.x>0&&page+1 29. 30.//Weareontherightside,dragthecurrentpage 31. 32.flips[page].dragging=true; 33. 34.} 35. 36.} 37. 38. 39. 40.//Preventsthetextselection 41. 42.event.preventDefault(); 43. 44.} 45. 46. 47. 48.functionmouseUpHandler(event){ 49. 50.for(vari=0;i 51. 52.//Ifthisflipwasbeingdragged,animatetoitsdestination 53. 54.if(flips.dragging){ 55. 56.//Figureoutwhichpageweshouldnavigateto 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.} 复制代码 mouseMoveHandler方法会实时更新mouse对象的内容,这样我们可以得到鼠标的精确位置。 在mouseDonwHandler中,检测鼠标是在书的左边还是右边按下,记得得知翻页的方向。 我还需要知道翻页方向的下一张是否还有页面,因为我们会遇到第一页或最后一页的情况。 如果所有的flip选项都有检测没有问题,设置该flip对象的dragging属性为true。 在mouseUpHandler中,我们会检测每个页面是否被拖动,如果是则释放该页面的拖动。 停止拖动后,页面会根据鼠标的位置决定是向前翻动还是向后翻动。 同时页面的页面也会被更新,作为页面的导航。 渲染 现在大部分的逻辑运算都已经完成了,下面我们要学习如果在canvas元素中渲染折叠的页面。 这些渲染的效果大部分都在render()方法中完成,这个方法每秒钟会执行60次,来实时更新翻动页面的状态。 1.functionrender(){ 2. 3. 4.//Resetallpixelsinthecanvas 5. 6.context.clearRect(0,0,canvas.width,canvas.height); 7. 8. 9. 10.for(vari=0,len=flips.length;i 11. 12.varflip=flips; 13. 14. 15. 16.if(flip.dragging){ 17. 18.flip.target=Math.max(Math.min(mouse.x/PAGE_WIDTH,1),-1); 19. 20.} 21. 22. 23. 24.//Easeprogresstowardsthetargetvalue 25. 26.flip.progress+=(flip.target-flip.progress)*0.2; 27. 28. 29. 30.//Iftheflipisbeingdraggedorissomewhereinthemiddle 31. 32.//ofthebook,renderit 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值设置为鼠标坐标相对于电子书宽度的位置,而不是实际的像素值。 同时progress也会一点点增加至target值,这样翻动每帧都会更新,也就得到了我们看到的页面平滑的翻动动画效果。 因为每一帧都要遍历所有的页面,所以我们需要保证只重绘当前活动的页面。 如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%),或者页面的flagged属性值是dragging,我们认为该页面是当前活动的页面。 现在所有的逻辑运算都已经完成了,下面需要根据页面的当前状态绘制翻动页面效果。 我们来看胰腺癌drawFlip()方法的第一部分。 1.//Determinesthestrengthofthefold/bendona0-1range 2. 3. 4.varstrength=1-Math.abs(flip.progress); 5. 6. 7. 8.//Widthofthefoldedpaper 9. 10.varfoldWidth=(PAGE_WIDTH*0.5)*(1-flip.progress); 11. 12. 13. 14.//Xpositionofthefoldedpaper 15. 16.varfoldX=PAGE_WIDTH*flip.progress+foldWidth; 17. 18. 19. 20.//Howfaroutsideofthebookthepaperisbentduetoperspective 21. 22.varverticalOutdent=20*strength; 23. 24. 25. 26.//Themaximumwidthsofthethreeshadowsused 27. 28.varpaperShadowWidth=(PAGE_WIDTH*0.5)*Math.max(Math.min(1-flip.progress,0.5),0); 29. 30.varrightShadowWidth=(PAGE_WIDTH*0.5)*Math.max(Math.min(strength,0.5),0); 31. 32.varleftShadowWidth=(PAGE_WIDTH*0.5)*Math.max(Math.min(strength,0.5),0); 33. 34. 35. 36.//MaskthepagebysettingitswidthtomatchthefoldX 37. 38.flip.page.style.width=Math.max(foldX,0)+"px"; 复制代码 这部分的代码开始是一些变量的计算,它们用来绘制真实的页面翻动效果。 Progress变量在这些变量中扮演最重要的角色,因为它是页面要翻动到的位置。 为了添加深度效果,我们让页面可以超出书的边界,当页面翻动至书脊位置时,超出部分达到了极限。 页面翻动时的折叠效果. 现在所有的值都一个就位,万事俱备,只差绘制页面了! 1.context.save(); 2. 3. 4.context.translate(CANVAS_PADDING+(BOOK_WIDTH/2),PAGE_Y+CANVAS_PADDING); 5. 6. 7. 8.//Drawasharpshadowontheleftsideofthepage 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.stroke(); 21. 22. 23. 24.//Rightsidedropshadow 25. 26.varrightShadowGradient=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)'); 33. 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(); 49. 50. 51. 52.//Leftsidedropshadow 53. 54.varleftShadowGradient=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,'+(strength*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-foldWidth-leftShadowWidth,PAGE_HEIGHT); 75. 76.context.fill(); 77. 78. 79. 80.//Gradientappliedtothefoldedpaper(highlights&shadows) 81. 82.varfoldGradient=context.createLinearGradient( 83. 84.foldX-paperShadowWidth,0,foldX,0); 85. 86.foldGradient.addColorStop(0.35,'#fafafa'); 87. 88.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.//Drawthefoldedpieceofpaper 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.lineTo(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)原点来绘制翻动的页面。 注意,我们需要使用save()方法保存当前canvas的变换,变换完成后调用restore()方法。 绘制翻动页面的起始点,同translate(x,y)方法,将其从canvas的左上角移动到书脊顶端,这样简化了绘制的逻辑 foldGradient方法用来填充折叠的页面,同时绘制真实的高光和阴影效果。 同时我还为页面绘制了一条很窄的黑边,防止在较亮的背景下页面“消失”。 现在剩下的就是用我们前面定义的变量绘制折叠的页面。 页面左右两侧用直线绘制,顶部和底部绘制弯曲的曲线,产生一种纸张折叠的感觉。 页面的折叠程度由verticalOutdent值决定。 全文结束! 现在你得到的是一个完整的HTML5电子书。 翻书实例Demo 翻页效果是为了像用户传递正确的翻页体验,所有本教程中的图片无法让你感受到效果,点击下面的链接体验一下最终的结果。 下一步 如果本教程中的电子书加上一个硬书皮,会使它在翻页的基础上,给人带来更好的阅读体验
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 开始 制作