1、HTML 5如何创建一个图片浏览器看HTML 5如何创建一个图片浏览器2012-04-25 14:06 颜林 HTML5China 我要评论(2) 字号：T | T通过如何用 Canvas 来制作一个图片浏览器的具体实例，来说明 Canvas 的各种 API，如何使用这些 API 以及如何应用到工程中去。AD： HTML Canvas 介绍HTML5 是目前正在讨论的新一代 HTML 标准，它代表了现在 Web 领域的最新的发展方向。在 HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证，视频和音频标签，网页元素的拖拽，离线存储，工作线程等等。当然，其中一个最令人激动的新特性就
2、是新的标签类型 Canvas，开发人员可以通过该标签，在网页上直接用脚本进行绘图，产生各种 2D 渲染的效果。所以有人预言，HTML5 将是 Flash 和 Silverlight 的“杀手”。从 Firefox 1.5 开始就已经支持 Canvas，Safari 也是很早就开始支持 Canvas。新的浏览器比如 Chrome 也是从一开始就支持。但遗憾的是，到目前为止，IE 一直不支持该标准。下面内容将通过如何用 Canvas 来制作一个图片浏览器的具体实例，来说明 Canvas 的各种 API，如何使用这些 API 以及如何应用到工程中去。本文将首先介绍如何创建图片浏览器的网页和 Java
3、Script 类，介绍整体界面的设计，然后介绍如何用 Canvas 的 API 来绘制 2D 图形，然后介绍如何在 Canvas 上加载和绘制图像，接下来本例会在图片浏览器中加入其他基于 Canvas 的效果，最后是总结和展望。创建图片浏览器框架创建文件首先我们创建一个新的 html 文件 thumbnail.html，加入如清单 1 所示的内容：清单 1.thumbnail.html1. 2. 3. 4. Canvas Based Thumbnail 5. 6. body 7. background: black; 8. color: white; 9. font: 24pt Baskerv
4、ille, Times, Times New Roman, serif; 10. padding: 0; 11. margin: 0; 12. overflow: hidden; 13. 14. 15. 16. 17. 18. 19. 20. 这里我们可以看到，canvas 是 html 的一个新的标签，其用法和其他标签一样，只不过它的高和宽有独立的属性而不是在 css 定义的。如果我们要设置一个 Canvas 区域的宽高，必须定义为 而不能是 。在上面的 html 文件中我们没有直接定义 Canvas 区域的大小，而是在 JavaScript 中动态定义，下面将要详细说明。现在我们创建一个新
5、的 JavaScript 文件 thumbnail.js 来在 Canvas 中绘制图像，我们设计一个 thumbnail 类，该类可以处理用户事件，绘制图形，显示图像。然后在 window.onload 事件中加载该类，代码如清单 2 所示：清单 2 .thumbnail.js1. function thumbnail() 2. this.load = function() 3. 4. 5. 6. window.onload = function() 7. thumb = new thumbnail(); 8. thumb.load(); 9. 代码定义了一个初始化函数 load，并且声明了
6、 thumbnail 类，这样我们就可以在 thumbnail 类中添加代码，在 Canvas 上绘制各种图形以及图像了。设计界面我们为这个图片浏览页面设计这样一种界面，图片通过缩放占满全部网页空间，在中间下方，绘制一个导航栏，显示缩略图，当点击缩略图时，该图片显示到网页中。同时，如果鼠标悬停在某个缩放图上，则显示一个大一点的预览图用来供用户预览。在导航栏的左右两边，添加 2 个按钮，用于翻页显示上一页和下一页的缩略图。对导航栏上所有控件的尺寸大小和位置如图所示的方案。这样，我们就可以按照该方案在 Canvas 上绘制这些控件了。界面设计用 Canvas 绘制图形绘制导航框首先我们绘制如图所示
7、的一个导航栏。在左右两边各有一个按钮，按钮上显示一个三角形的指示图形。当鼠标放到一个按钮上时，按钮的背景色能变成高亮的颜色，显示当前选中的按钮。导航框清单 3 显示了绘制图 2 所示的导航栏的代码片段。清单 3 . 绘制导航框代码1. 2. function thumbnail() 3. const NAVPANEL_COLOR = rgba(100, 100, 100, 0.2); / 导航栏背景色 4. const NAVBUTTON_BACKGROUND = rgb(40, 40, 40); / 导航栏中 button 的背景色 5. const NAVBUTTON_COLOR = rg
8、b(255, 255, 255); /button 的前景色 6. const NAVBUTTON_HL_COLOR = rgb(100, 100, 100); /button 高亮时的前景色 7. 8. var canvas = document.getElementById(canvas); / 获得 canvas 对象 9. var context = canvas.getContext(2d); / 获得上下文对象 10. 11. / 绘制左边 button 12. function paintLeftButton(navRect, color) 13. /left button 14
9、. 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.wid
10、th, lButtonRect.height); 25. 26. /left arrow 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_A
11、RROW_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.h
12、eight/2); 38. context.closePath(); 39. context.fill(); 40. context.restore(); 41. 42. context.restore(); 43. 如上所述，在页面 html 中我们声明了 元素。当需要在 区域绘制图形时，我们需要获得绘制图形的上下文对象，在一个上下文对象中，保存了当前的初始坐标位置，颜色，风格等等信息。这里我们通过如清单 4 的语句获取 Canvas 的 2 维绘图的上下文对象。清单 4. 获得绘图上下文1. var canvas = document.getElementById(canvas); 2.
13、var context = 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. 绘制简单
14、矩形1. var canvas = document.getElementById(canvas); 2. var context = 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. 绘
15、制路径函数1. beginPath(): 开始一段路径 2. closePath(): 结束一段路径 3. moveTo(x,y) : 移动起始点到某点 4. lineTo(x,y) ： 绘制线段到目标点 这样，我们在绘制三角形的时候，只需要确定三个顶点的坐标，就可以通过 lineTo 函数绘制三条线段，但是，我们还需要一个函数在该三角形区域内填充颜色，这样需要用到填充和描边的函数和样式：清单 8. 填充和描边样式1. fillStyle = color ： 设置填充颜色 2. storkeStyle = color : 设置描变颜色 这里 color 值可以是标准的 CSS 颜色值，还可以通
16、过 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() : 按照当前填充样式填充路径所描述的形状 这样，用上述几个函数，我们绘制一个三角形时
17、，可以用如下语句：清单 11. 绘制三角形代码1. var canvas = document.getElementById(canvas); 2. var context = 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
18、.fill(); 在清单 3 中，我们还声明了一些常量来定义导航栏的各种控件的大小，其中长度值都是以像素为单位的。这样我们绘制了整个导航栏，但我们现在需要当鼠标放到按钮上时，按钮的前景色能够高亮，显示当前选中的按钮。这就需要我们在代码中响应用户事件，并进行不同类型的绘制。响应用户事件响应用户事件和普通的 DOM 编程类似，如清单 12 所示：清单 12. 响应鼠标移动时间1. var lastMousePos; / 当前鼠标位置 2. this.load = function() 3. /event binding 4. canvas.onmousemove = onMouseMove; 5.
19、 6. function onMouseMove(event) 7. lastMousePos = x:event.clientX, y:event.clientY; 8. paint(); 9. 10. function pointIsInRect(point, rect) 11. return (rect.x point.x & point.x rect.x + rect.width & 12. rect.y point.y & point.y rect.y + rect.height); 13. 14. function paint() 15. context.clearRect(0,
20、0, canvas.width, canvas.height); 16. var paintInfo = 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 = pointIsIn
21、Rect(lastMousePos, rButtonRect); 22. 23. 24. paintNavigator(paintInfo); 25. 这样我们就绘制了一个完整的导航栏，它能够响应鼠标移动事件，并高亮当前选中的按钮。下面我们需要加载和显示图片，这就需要用到 Canvas 的绘制图像函数。用 Canvas 绘制图像加载和显示图像加载和显示图像的代码片段如清单 13 所示：清单 13. 加载和显示图像1. const PAINT_INTERVAL = 20; / 循环间隔 2. const PAINT_SLOW_INTERVAL = 20000; 3. const IDLE_TIM
22、E_OUT = 3000; / 空闲超时时间 4. 5. / 定义全部图片 URL 数组，在本例中，所有图片保存在和网页同目录中 6. var imageLocations = 7. 2006109173628.jpg, 8. 2007310132939.jpg, 9. 200733094828-1.jpg 10. ; 11. / 加载图片 12. function loadImages() 13. var total = imageLocations.length; 14. var imageCounter = 0; 15. var onLoad = function(err, msg) 1
23、6. if (err) 17. console.log(msg); 18. 19. imageCounter+; 20. if (imageCounter = total) 21. loadedImages = true; 22. 23. 24. 25. for (var i = 0; i imageLocations.length; i+) 26. var img = new Image(); 27. img.onload = function() onLoad(false); ; 28. img.onerror = function() onLoad(true, e); 29. img.s
24、rc = imageLocationsi; 30. imagesi = img; 31. 32. 33. / 绘制图片 34. function paintImage(index) 35. if (!loadedImages) 36. return; 37. var image = imagesindex; 38. var screen_h = canvas.height; 39. var screen_w = canvas.width; 40. var ratio = getScaleRatio(width:image.width, height:image.height, 41. widt
25、h:screen_w, height:screen_h); 42. var img_h = image.height * ratio; 43. var img_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
26、 区域，尽可能大地缩放图片并显示在 Canvas 中，其最佳缩放比例如所示 :最佳缩放比例示例这里缩放比例是通过本例所定义的函数 getScaleRatio 来获得的，其详细代码见附件。这样我们可以在 Canvas 上绘制图像，绘制图像的函数定义如下 :清单 14. 绘制图像函数1. drawImage(image, x, y) image 为一个图像或者 Canvas 对象，x，y 为图片所要放至位置的左上角坐标 但该函数还无法满足我们的要求，我们需要缩放图片到一个最佳大小，这就需要 Canvas 绘制图片函数的另外一种形式：清单 15. 绘制图像函数 2 1. drawImage(imag
27、e, x, y, width, height) width, height 为图像在目标 Canvas 上的大小 该函数将图片缩放到 width 和 height 所指定的大小并显示出来。我们通过函数 getScaleRatio 来计算最佳缩放大小，然后就可以通过如清单 15 所示来绘制最佳大小的图片。绘制图片需要传入一个 image 对象，它一般是一个图片或者 Canvas 对象。也就是说你可以从一个 URL 中下载图片显示在 Canvas 中，也可以在一个 Canvas 中显示另外一个 Canvas 中绘制的图形。通过如清单 16 所示的代码来加载图片：清单 16. 加载图片代码1. va
28、r onLoad = function(err, msg) 2. if (err) console.log(msg); 3. 4. var img = new Image(); 5. img.onload = function() onLoad(false); ; 6. img.onerror = function() onLoad(true, e); 7. img.src = myImage.png ; / 设置源路径 在整个程序中，我们利用了 setInterval 函数加入了一个定时器来触发主循环，用于不断循环等待全部图片加载。当等待时间超过一个阀值之后，主循环进入 idle 状态，该循
29、环不仅能够用于等待全部图片加载，也可以用于绘制动画效果，我们在后面将会讲到如何利用该主循环来制作动态效果。绘制缩略图下一步需要在导航栏中绘制每个图片的缩略图，该缩略图必须按照最优的大小和间隔排列在导航栏中，同时缩略图必须经过裁剪，获得最优的显示区域。整体效果如图所示：缩略图效果实现代码片段如清单 17 所示：清单 17. 缩略图代码1. const HL_OFFSET = 3; 2. const THUMBNAIL_LENGTH = NAVPANEL_HEIGHT - NAVBUTTON_YOFFSET*2; / 缩略图显示区域的高度 3. const MIN_THUMBNAIL_LENGTH = 10; / 最小缩略图间隔 4. 5. var currentImage = 0; / 当前图片序号 6. var firstImageIndex = 0; / 当前缩略图中第一张图片序号 7. var thumbNailCount = 0; / 当前显示的缩略图数 8. var maxThum
