HTML 5如何创建一个图片浏览器.docx
- 文档编号:16565764
- 上传时间:2023-07-14
- 格式:DOCX
- 页数:27
- 大小:162.67KB
HTML 5如何创建一个图片浏览器.docx
《HTML 5如何创建一个图片浏览器.docx》由会员分享,可在线阅读,更多相关《HTML 5如何创建一个图片浏览器.docx(27页珍藏版)》请在冰点文库上搜索。
HTML5如何创建一个图片浏览器
看HTML5如何创建一个图片浏览器
2012-04-2514:
06颜林HTML5China我要评论
(2)字号:
T|T
通过如何用Canvas来制作一个图片浏览器的具体实例,来说明Canvas的各种API,如何使用这些API以及如何应用到工程中去。
AD:
HTMLCanvas介绍
HTML5是目前正在讨论的新一代HTML标准,它代表了现在Web领域的最新的发展方向。
在HTML5标准中,加入了新的多样的内容描述标签,直接支持表单验证,视频和音频标签,网页元素的拖拽,离线存储,工作线程等等。
当然,其中一个最令人激动的新特性就是新的标签类型Canvas,开发人员可以通过该标签,在网页上直接用脚本进行绘图,产生各种2D渲染的效果。
所以有人预言,HTML5将是Flash和Silverlight的“杀手”。
从Firefox1.5开始就已经支持Canvas,Safari也是很早就开始支持Canvas。
新的浏览器比如Chrome也是从一开始就支持。
但遗憾的是,到目前为止,IE一直不支持该标准。
下面内容将通过如何用Canvas来制作一个图片浏览器的具体实例,来说明Canvas的各种API,如何使用这些API以及如何应用到工程中去。
本文将首先介绍如何创建图片浏览器的网页和JavaScript类,介绍整体界面的设计,然后介绍如何用Canvas的API来绘制2D图形,然后介绍如何在Canvas上加载和绘制图像,接下来本例会在图片浏览器中加入其他基于Canvas的效果,最后是总结和展望。
创建图片浏览器框架
创建文件
首先我们创建一个新的html文件thumbnail.html,加入如清单1所示的内容:
清单1.thumbnail.html
1.
DOCTYPEHTML>
2.
3.
4.
5.
6.body{
7.background:
black;
8.color:
white;
9.font:
24ptBaskerville,Times,TimesNewRoman,serif;
10.padding:
0;
11.margin:
0;
12.overflow:
hidden;
13.}
14.
15.
16.
17.
18.
19.
20.
这里我们可以看到,canvas是html的一个新的标签,其用法和其他标签一样,只不过它的高和宽有独立的属性而不是在css定义的。
如果我们要设置一个Canvas区域的宽高,必须定义为 100,height: 100">。 在上面的html文件中我们没有直接定义Canvas区域的大小,而是在JavaScript中动态定义,下面将要详细说明。 现在我们创建一个新的JavaScript文件thumbnail.js来在Canvas中绘制图像,我们设计一个thumbnail类,该类可以处理用户事件,绘制图形,显示图像。 然后在window.onload事件中加载该类,代码如清单2所示: 清单2.thumbnail.js 1.functionthumbnail(){ 2.this.load=function() 3.} 4.} 5. 6.window.onload=function(){ 7.thumb=newthumbnail(); 8.thumb.load(); 9.} 代码定义了一个初始化函数load,并且声明了thumbnail类,这样我们就可以在thumbnail类中添加代码,在Canvas上绘制各种图形以及图像了。 设计界面 我们为这个图片浏览页面设计这样一种界面,图片通过缩放占满全部网页空间,在中间下方,绘制一个导航栏,显示缩略图,当点击缩略图时,该图片显示到网页中。 同时,如果鼠标悬停在某个缩放图上,则显示一个大一点的预览图用来供用户预览。 在导航栏的左右两边,添加2个按钮,用于翻页显示上一页和下一页的缩略图。 对导航栏上所有控件的尺寸大小和位置如图所示的方案。 这样,我们就可以按照该方案在Canvas上绘制这些控件了。 界面设计 用Canvas绘制图形 绘制导航框 首先我们绘制如图所示的一个导航栏。 在左右两边各有一个按钮,按钮上显示一个三角形的指示图形。 当鼠标放到一个按钮上时,按钮的背景色能变成高亮的颜色,显示当前选中的按钮。 导航框 清单3显示了绘制图2所示的导航栏的代码片段。 清单3.绘制导航框代码 1. 2.functionthumbnail(){ 3.constNAVPANEL_COLOR='rgba(100,100,100,0.2)';//导航栏背景色 4.constNAVBUTTON_BACKGROUND='rgb(40,40,40)';//导航栏中button的背景色 5.constNAVBUTTON_COLOR='rgb(255,255,255)';//button的前景色 6.constNAVBUTTON_HL_COLOR='rgb(100,100,100)';//button高亮时的前景色 7. 8.varcanvas=document.getElementById('canvas');//获得canvas对象 9.varcontext=canvas.getContext('2d');//获得上下文对象 10. 11.//绘制左边button 12.functionpaintLeftButton(navRect,color){ 13.//leftbutton 14.lButtonRect={ 15.x: navRect.x+NAVBUTTON_XOFFSET, 16.y: navRect.y+NAVBUTTON_YOFFSET, 17.width: NAVBUTTON_WIDTH, 18.height: navRect.height-NAVBUTTON_YOFFSET*2 19.} 20. 21.context.save(); 22.context.fillStyle=color; 23.context.fillRect(lButtonRect.x,lButtonRect.y, 24.lButtonRect.width,lButtonRect.height); 25. 26.//leftarrow 27.context.save(); 28.context.fillStyle=NAVBUTTON_COLOR; 29.context.beginPath(); 30.context.moveTo(lButtonRect.x+NAVBUTTON_ARROW_XOFFSET, 31.lButtonRect.y+lButtonRect.height/2); 32.context.lineTo(lButtonRect.x+lButtonRect.width-NAVBUTTON_ARROW_XOFFSET, 33.lButtonRect.y+NAVBUTTON_ARROW_YOFFSET); 34.context.lineTo(lButtonRect.x+lButtonRect.width-NAVBUTTON_ARROW_XOFFSET, 35.lButtonRect.y+lButtonRect.height-NAVBUTTON_ARROW_YOFFSET); 36.context.lineTo(lButtonRect.x+NAVBUTTON_ARROW_XOFFSET, 37.lButtonRect.y+lButtonRect.height/2); 38.context.closePath(); 39.context.fill(); 40.context.restore(); 41. 42.context.restore(); 43.} 如上所述,在页面html中我们声明了 当需要在 这里我们通过如清单4的语句获取Canvas的2维绘图的上下文对象。 清单4.获得绘图上下文 1.varcanvas=document.getElementById('canvas'); 2.varcontext=canvas.getContext('2d'); 获得上下文对象之后,我们就可以通过Canvas提供的API来进行绘画了。 在清单5中,我们使用了矩形的绘制函数来绘制整个导航栏背景和左右两个按钮。 所下所示: 清单5.矩形绘制函数 1.fillRect(x,y,width,height): 绘制一个填充的矩形 2.strokeRect(x,y,width,height): 给一个矩形描边 3.clearRect(x,y,width,height): 清除该矩形内所有内容使之透明 例如,我们要绘制一个简单的矩形可以用如清单6所示代码: 清单6.绘制简单矩形 1.varcanvas=document.getElementById('canvas'); 2.varcontext=canvas.getContext('2d'); 3.context.fillStyle='black'; 4.context.fillRect(0,0,50,50); 5.context.clearRect(0,0,20,20); 6.context.strokeRect(0,0,20,20); 我们绘制该导航框时,需要在左右两边各绘制一个三角形,对于除了矩形以外的所有多边形,必须得通过路径来绘制,常用的路径相关函数有: 清单7.绘制路径函数 1.beginPath(): 开始一段路径 2.closePath(): 结束一段路径 3.moveTo(x,y): 移动起始点到某点 4.lineTo(x,y): 绘制线段到目标点 这样,我们在绘制三角形的时候,只需要确定三个顶点的坐标,就可以通过lineTo函数绘制三条线段,但是,我们还需要一个函数在该三角形区域内填充颜色,这样需要用到填充和描边的函数和样式: 清单8.填充和描边样式 1.fillStyle=color: 设置填充颜色 2.storkeStyle=color: 设置描变颜色 这里color值可以是标准的CSS颜色值,还可以通过rgba函数设置透明度。 我们可以如下设置: 清单9.填充样式举例 1.context.fillStyle="white"; 2.context.strokeStyle="#FFA500"; 3.context.fillStyle="rgb(255,165,0)"; 4.context.fillStyle="rgba(255,165,0,1)"; 同样,当需要填充颜色样式或者描边时,有如下函数: 清单10.填充和描边函数 1.stroke(): 按照当前描边样式描边当前路径 2.fill(): 按照当前填充样式填充路径所描述的形状 这样,用上述几个函数,我们绘制一个三角形时,可以用如下语句: 清单11.绘制三角形代码 1.varcanvas=document.getElementById('canvas'); 2.varcontext=canvas.getContext('2d'); 3.context.fillStyle='black'; 4.context.beginPath(); 5.context.moveTo(0,0); 6.context.lineTo(10,0); 7.context.lineTo(10,10); 8.context.lineTo(0,0); 9.context.closePath(); 10.context.fill(); 在清单3中,我们还声明了一些常量来定义导航栏的各种控件的大小,其中长度值都是以像素为单位的。 这样我们绘制了整个导航栏,但我们现在需要当鼠标放到按钮上时,按钮的前景色能够高亮,显示当前选中的按钮。 这就需要我们在代码中响应用户事件,并进行不同类型的绘制。 响应用户事件 响应用户事件和普通的DOM编程类似,如清单12所示: 清单12.响应鼠标移动时间 1.varlastMousePos;//当前鼠标位置 2.this.load=function(){ 3.//eventbinding 4.canvas.onmousemove=onMouseMove; 5.} 6.functiononMouseMove(event){ 7.lastMousePos={x: event.clientX,y: event.clientY}; 8.paint(); 9.} 10.functionpointIsInRect(point,rect){ 11.return(rect.x 12.rect.y 13.} 14.functionpaint(){ 15.context.clearRect(0,0,canvas.width,canvas.height); 16.varpaintInfo={inLeftBtn: false,inRightBtn: false} 17. 18.if(lastMousePos&&navRect&&lButtonRect&&rButtonRect){ 19.if(pointIsInRect(lastMousePos,navRect)){ 20.paintInfo.inLeftBtn=pointIsInRect(lastMousePos,lButtonRect); 21.paintInfo.inRightBtn=pointIsInRect(lastMousePos,rButtonRect); 22.} 23.} 24.paintNavigator(paintInfo); 25.} 这样我们就绘制了一个完整的导航栏,它能够响应鼠标移动事件,并高亮当前选中的按钮。 下面我们需要加载和显示图片,这就需要用到Canvas的绘制图像函数。 用Canvas绘制图像 加载和显示图像 加载和显示图像的代码片段如清单13所示: 清单13.加载和显示图像 1.constPAINT_INTERVAL=20;//循环间隔 2.constPAINT_SLOW_INTERVAL=20000; 3.constIDLE_TIME_OUT=3000;//空闲超时时间 4. 5.//定义全部图片URL数组,在本例中,所有图片保存在和网页同目录中 6.varimageLocations=[ 7.'2006109173628.jpg', 8.'2007310132939.jpg', 9.'200733094828-1.jpg' 10.]; 11.//加载图片 12.functionloadImages(){ 13.vartotal=imageLocations.length; 14.varimageCounter=0; 15.varonLoad=function(err,msg){ 16.if(err){ 17.console.log(msg); 18.} 19.imageCounter++; 20.if(imageCounter==total){ 21.loadedImages=true; 22.} 23.} 24. 25.for(vari=0;i 26.varimg=newImage(); 27.img.onload=function(){onLoad(false);}; 28.img.onerror=function(){onLoad(true,e);}; 29.img.src=imageLocations[i]; 30.images[i]=img; 31.} 32.} 33.//绘制图片 34.functionpaintImage(index){ 35.if(! loadedImages) 36.return; 37.varimage=images[index]; 38.varscreen_h=canvas.height; 39.varscreen_w=canvas.width; 40.varratio=getScaleRatio({width: image.width,height: image.height}, 41.{width: screen_w,height: screen_h}); 42.varimg_h=image.height*ratio; 43.varimg_w=image.width*ratio; 44. 45.context.drawImage(image,(screen_w-img_w)/2,(screen_h-img_h)/2,img_w,img_h); 46.} 在清单13的代码中,我们更新了主绘制函数paint,加入了paintImage函数,在paintImage函数中,利用Canvas的drawImage函数,在整个Canvas区域,尽可能大地缩放图片并显示在Canvas中,其最佳缩放比例如所示: 最佳缩放比例示例 这里缩放比例是通过本例所定义的函数getScaleRatio来获得的,其详细代码见附件。 这样我们可以在Canvas上绘制图像,绘制图像的函数定义如下: 清单14.绘制图像函数 1.drawImage(image,x,y)image为一个图像或者Canvas对象,x,y为图片所要放至位置的左上角坐标 但该函数还无法满足我们的要求,我们需要缩放图片到一个最佳大小,这就需要Canvas绘制图片函数的另外一种形式: 清单15.绘制图像函数2 1.drawImage(image,x,y,width,height)width,height为图像在目标Canvas上的大小 该函数将图片缩放到width和height所指定的大小并显示出来。 我们通过函数getScaleRatio来计算最佳缩放大小,然后就可以通过如清单15所示来绘制最佳大小的图片。 绘制图片需要传入一个image对象,它一般是一个图片或者Canvas对象。 也就是说你可以从一个URL中下载图片显示在Canvas中,也可以在一个Canvas中显示另外一个Canvas中绘制的图形。 通过如清单16所示的代码来加载图片: 清单16.加载图片代码 1.varonLoad=function(err,msg){ 2.if(err)console.log(msg); 3.} 4.varimg=newImage(); 5.img.onload=function(){onLoad(false);}; 6.img.onerror=function(){onLoad(true,e);}; 7.img.src=‘myImage.png’;//设置源路径 在整个程序中,我们利用了setInterval函数加入了一个定时器来触发主循环,用于不断循环等待全部图片加载。 当等待时间超过一个阀值之后,主循环进入idle状态,该循环不仅能够用于等待全部图片加载,也可以用于绘制动画效果,我们在后面将会讲到如何利用该主循环来制作动态效果。 绘制缩略图 下一步需要在导航栏中绘制每个图片的缩略图,该缩略图必须按照最优的大小和间隔排列在导航栏中,同时缩略图必须经过裁剪,获得最优的显示区域。 整体效果如图所示: 缩略图效果 实现代码片段如清单17所示: 清单17.缩略图代码 1.constHL_OFFSET=3; 2.constTHUMBNAIL_LENGTH=NAVPANEL_HEIGHT-NAVBUTTON_YOFFSET*2;//缩略图显示区域的高度 3.constMIN_THUMBNAIL_LENGTH=10;//最小缩略图间隔 4. 5.varcurrentImage=0;//当前图片序号 6.varfirstImageIndex=0;//当前缩略图中第一张图片序号 7.varthumbNailCount=0;//当前显示的缩略图数 8.varmaxThum
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 5如何创建一个图片浏览器 如何 创建 一个 图片 浏览器