HTML5如何创建一个图片浏览器.docx

下载文档 降价啦

13
0
约1.78万字
约 21页
2020-08-11 发布于天津
举报
版权申诉
保障服务

HTML5如何创建一个图片浏览器.docx

1、本文档共21页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

看HTML 5如何创建一个图片浏览器 2012-04-25 14:06 颜林 HTML5China 我要评论（2）字号：T | T 收織［3 通过如何用Canvas来制作一个图片浏览器的具体实例，来说明 Canvas的各种API，如何使用这些 API 以及如何应用到工程中去。 AD HTML Canvas 介绍 HTML5是目前正在讨论的新一代 HTML标准，它代表了现在 Web领域的最新的发展方向。在 HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证，视频和音频标签，网页元素的拖拽，离线存储，工作线程等等。当然，其中一个最令人激动的新特性就是新的标签类型 Canvas，开发人员可以通过该标签，在网页上直接用脚本进行绘图，产生各种 2D渲染的效果。所以有人预言， HTML5将是Flash和 Silverlight 的“杀手”。从Firefox 1.5开始就已经支持 Canvas , Safari也是很早就开始支持 Canvas。新的浏览器比如 Chrome也是从一开始就支持。但遗憾的是，到目前为止， IE 一直不支持该标准。下面内容将通过如何用 Canvas来制作一个图片浏览器的具体实例，来说明 Canvas的各种API，如何使用这些API以及如何应用到工程中去。本文将首先介绍如何创建图片浏览器的网页和 JavaScript 类，介绍整体界面的设计，然后介绍如何用 Canvas的API来绘制2D图形，然后介绍如何在 Canvas上加载和绘制图像，接下来本例会在图片浏览器中加入其他基于 Canvas的效果，最后是总结和展望。创建图片浏览器框架创建文件首先我们创建一个新的 html文件thumbnail.html ，加入如清单1所示的内容：清单 1.thumbnail.html 1. <!DOCTYPE HTML > 2. <html> 3. <head> 4. <title> Canvas Based Thumbnail </title> 5. <style type ="text/css" > 6. body { 7. background: black; 8. color: white; 9. font: 24pt Baskerville, Times, Times New Roman, serif: padding: 0; margin: 0; overflow: hidden; } v/style> vscript type ="text/javascript" src ="thumbnail.js" ></script> </head> <body> vcanvas id ="canvas" ></canvas> </body> </html> 这里我们可以看到，canvas是html的一个新的标签，其用法和其他标签一样，只不过它的高和宽有独立的属性而不是在 css定义的。如果我们要设置一个 Canvas区域的宽高，必须定义为 vcanvas width="100" height="100"> 而不能是 vcanvas style="width:1OO,height:1OO"> 。在上面的 html 文件中我们没有直接定义 Canvas区域的大小，而是在 JavaScript 中动态定义，下面将要详细说明。现在我们创建一个新的 JavaScript 文件thumbnail.js 来在Canvas中绘制图像，我们设计一个 thumbnail类，该类可以处理用户事件，绘制图形，显示图像。然后在 window.onload 事件中加载该类，代码如清单2所示：清单 2 .thumbnail.js function thumbnail。{ this.load = function () } } 5. window.onload = function () { thumb = new thumbnail。； thumb.load(); } 代码定义了一个初始化函数 load，并且声明了 thumbnail 类，这样我们就可以在 thumbnail 类中添加代码，在Canvas上绘制各种图形以及图像了。设计界面我们为这个图片浏览页面设计这样一种界面，图片通过缩放占满全部网页空间，在中间下方，绘制一个导航栏，显示缩略图，当点击缩略图时，该图片显示到网页中。同时，如果鼠标悬停在某个缩放图上，则显示一个大一点的预览图用来供用户预览。在导航栏的左右两边，添加2个按钮，用于翻页显示上一页和下一页的缩略图。对导航栏上所有控件的尺寸大小和位置如图所示的方案。这样，我们就可以按照该方案在Canvas上绘制这些控件了。界面设计用Canvas绘制图形绘制导航框首先我们绘制如图所