看HTML 5如何創建一個圖片瀏覽器

作者：顏林 2012-04-25 14:06:45

通過如何用 Canvas 來制作一個圖片瀏覽器的具體實例，來說明 Canvas 的各種 API，如何使用這些 API 以及如何應用到工程中去。

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

<!DOCTYPE HTML>   
 <html>   
 <head>   
  <title>Canvas Based Thumbnail</title>   
  <style type="text/css">   
    body {   
    background: black;   
    color: white;   
   font: 24pt Baskerville, Times, Times New Roman, serif;   
    padding: 0;   
    margin: 0;   
    overflow: hidden;   
    }   
  </style>   
  <script type="text/javascript" src="thumbnail.js"></script>   
 </head>   
 <body>   
  <canvas id="canvas"></canvas>   
 </body>   
 </html>

這里我們可以看到，canvas 是 html 的一個新的標簽，其用法和其他標簽一樣，只不過它的高和寬有獨立的屬性而不是在 css 定義的。如果我們要設置一個 Canvas 區域的寬高，必須定義為 <canvas width="100" height="100"> 而不能是 <canvas style="width:100,height:100">。在上面的 html 文件中我們沒有直接定義 Canvas 區域的大小，而是在 JavaScript 中動態定義，下面將要詳細說明。

現在我們創建一個新的 JavaScript 文件 thumbnail.js 來在 Canvas 中繪制圖像，我們設計一個 thumbnail 類，該類可以處理用戶事件，繪制圖形，顯示圖像。然后在 window.onload 事件中加載該類，代碼如清單 2 所示：

清單 2 .thumbnail.js

function thumbnail() {   
    this.load = function()   
    }   
 }   
 
 window.onload = function() {   
    thumb = new thumbnail();   
    thumb.load();   
 }

代碼定義了一個初始化函數 load，并且聲明了 thumbnail 類，這樣我們就可以在 thumbnail 類中添加代碼，在 Canvas 上繪制各種圖形以及圖像了。

設計界面

我們為這個圖片瀏覽頁面設計這樣一種界面，圖片通過縮放占滿全部網頁空間，在中間下方，繪制一個導航欄，顯示縮略圖，當點擊縮略圖時，該圖片顯示到網頁中。同時，如果鼠標懸停在某個縮放圖上，則顯示一個大一點的預覽圖用來供用戶預覽。在導航欄的左右兩邊，添加 2 個按鈕，用于翻頁顯示上一頁和下一頁的縮略圖。對導航欄上所有控件的尺寸大小和位置如圖所示的方案。這樣，我們就可以按照該方案在 Canvas 上繪制這些控件了。

界面設計
圖 1 界面設計

用 Canvas 繪制圖形

繪制導航框

首先我們繪制如圖所示的一個導航欄。在左右兩邊各有一個按鈕，按鈕上顯示一個三角形的指示圖形。當鼠標放到一個按鈕上時，按鈕的背景色能變成高亮的顏色，顯示當前選中的按鈕。

導航框
圖 2 導航框

清單 3 顯示了繪制圖 2 所示的導航欄的代碼片段。

清單 3 . 繪制導航框代碼

              
function thumbnail() {   
   const NAVPANEL_COLOR = 'rgba(100, 100, 100, 0.2)';    // 導航欄背景色  
   const NAVBUTTON_BACKGROUND = 'rgb(40, 40, 40)';  // 導航欄中 button 的背景色  
   const NAVBUTTON_COLOR = 'rgb(255, 255, 255)';   //button 的前景色  
   const NAVBUTTON_HL_COLOR = 'rgb(100, 100, 100)';   //button 高亮時的前景色  
 
   var canvas = document.getElementById('canvas');   // 獲得 canvas 對象  
   var context = canvas.getContext('2d');    // 獲得上下文對象  
 
   // 繪制左邊 button   
   function paintLeftButton(navRect, color) {   
       //left button   
       lButtonRect = {   
           x: navRect.x + NAVBUTTON_XOFFSET,   
           y: navRect.y + NAVBUTTON_YOFFSET,   
           width: NAVBUTTON_WIDTH,   
           height: navRect.height - NAVBUTTON_YOFFSET * 2   
       }   
 
       context.save();   
       context.fillStyle = color;   
       context.fillRect(lButtonRect.x, lButtonRect.y,   
lButtonRect.width, lButtonRect.height);   
 
       //left arrow   
       context.save();   
       context.fillStyle = NAVBUTTON_COLOR;   
       context.beginPath();   
       context.moveTo(lButtonRect.x + NAVBUTTON_ARROW_XOFFSET,   
lButtonRect.y + lButtonRect.height/2);   
       context.lineTo(lButtonRect.x + lButtonRect.width - NAVBUTTON_ARROW_XOFFSET,   
lButtonRect.y + NAVBUTTON_ARROW_YOFFSET);   
       context.lineTo(lButtonRect.x + lButtonRect.width - NAVBUTTON_ARROW_XOFFSET,   
lButtonRect.y + lButtonRect.height - NAVBUTTON_ARROW_YOFFSET);   
       context.lineTo(lButtonRect.x + NAVBUTTON_ARROW_XOFFSET,   
lButtonRect.y + lButtonRect.height/2);   
       context.closePath();   
       context.fill();   
       context.restore();   
 
       context.restore();   
   }

如上所述，在頁面 html 中我們聲明了 <canvas> 元素。當需要在 <canvas> 區域繪制圖形時，我們需要獲得繪制圖形的上下文對象，在一個上下文對象中，保存了當前的初始坐標位置，顏色，風格等等信息。這里我們通過如清單 4 的語句獲取 Canvas 的 2 維繪圖的上下文對象。

清單 4. 獲得繪圖上下文

var canvas = document.getElementById('canvas');   
var context = canvas.getContext('2d');

獲得上下文對象之后，我們就可以通過 Canvas 提供的 API 來進行繪畫了。在清單 5 中，我們使用了矩形的繪制函數來繪制整個導航欄背景和左右兩個按鈕。所下所示：

清單 5. 矩形繪制函數

fillRect(x,y,width,height)： 繪制一個填充的矩形  
strokeRect(x,y,width,height)： 給一個矩形描邊  
clearRect(x,y,width,height)： 清除該矩形內所有內容使之透明

例如，我們要繪制一個簡單的矩形可以用如清單 6 所示代碼：

清單 6. 繪制簡單矩形

var canvas = document.getElementById('canvas');   
var context = canvas.getContext('2d');   
context.fillStyle = 'black';   
context.fillRect(0, 0, 50, 50);   
context.clearRect(0, 0, 20, 20);   
context.strokeRect(0, 0, 20, 20);

我們繪制該導航框時，需要在左右兩邊各繪制一個三角形，對于除了矩形以外的所有多邊形，必須得通過路徑來繪制，常用的路徑相關函數有 :

清單 7. 繪制路徑函數

beginPath(): 開始一段路徑   
closePath(): 結束一段路徑  
moveTo(x,y)  : 移動起始點到某點  
lineTo(x,y) ： 繪制線段到目標點

這樣，我們在繪制三角形的時候，只需要確定三個頂點的坐標，就可以通過 lineTo 函數繪制三條線段，但是，我們還需要一個函數在該三角形區域內填充顏色，這樣需要用到填充和描邊的函數和樣式：

清單 8. 填充和描邊樣式

fillStyle = color ： 設置填充顏色  
storkeStyle = color : 設置描變顏色

這里 color 值可以是標準的 CSS 顏色值，還可以通過 rgba 函數設置透明度。我們可以如下設置：

清單 9. 填充樣式舉例

context.fillStyle = "white";   
context.strokeStyle = "#FFA500";   
context.fillStyle = "rgb(255,165,0)";   
context.fillStyle = "rgba(255,165,0,1)";

同樣，當需要填充顏色樣式或者描邊時，有如下函數：

清單 10. 填充和描邊函數

stroke() : 按照當前描邊樣式描邊當前路徑  
fill() : 按照當前填充樣式填充路徑所描述的形狀

這樣，用上述幾個函數，我們繪制一個三角形時，可以用如下語句：

清單 11. 繪制三角形代碼

var canvas = document.getElementById('canvas');   
var context = canvas.getContext('2d');   
context.fillStyle = 'black';   
context.beginPath();   
context.moveTo(0,0);   
context.lineTo(10,0);   
context.lineTo(10,10);   
context.lineTo(0,0);   
context.closePath();   
context.fill();

在清單 3 中，我們還聲明了一些常量來定義導航欄的各種控件的大小，其中長度值都是以像素為單位的。這樣我們繪制了整個導航欄，但我們現在需要當鼠標放到按鈕上時，按鈕的前景色能夠高亮，顯示當前選中的按鈕。這就需要我們在代碼中響應用戶事件，并進行不同類型的繪制。

響應用戶事件

響應用戶事件和普通的 DOM 編程類似，如清單 12 所示：

清單 12. 響應鼠標移動時間

var lastMousePos;    // 當前鼠標位置  
this.load = function() {   
    //event binding   
    canvas.onmousemove = onMouseMove;   
}   
function onMouseMove(event) {   
    lastMousePos = {x:event.clientX, y:event.clientY};   
    paint();   
}   
function pointIsInRect(point, rect) {   
    return (rect.x < point.x && point.x < rect.x + rect.width &&   
            rect.y < point.y && point.y < rect.y + rect.height);   
}   
function paint() {   
    context.clearRect(0, 0, canvas.width, canvas.height);   
    var paintInfo = {inLeftBtn:false, inRightBtn:false}   
 
    if (lastMousePos && navRect && lButtonRect && rButtonRect) {   
        if (pointIsInRect(lastMousePos, navRect)) {   
            paintInfo.inLeftBtn = pointIsInRect(lastMousePos, lButtonRect);   
            paintInfo.inRightBtn = pointIsInRect(lastMousePos, rButtonRect);   
        }   
    }   
    paintNavigator(paintInfo);   
}

這樣我們就繪制了一個完整的導航欄，它能夠響應鼠標移動事件，并高亮當前選中的按鈕。下面我們需要加載和顯示圖片，這就需要用到 Canvas 的繪制圖像函數。

用 Canvas 繪制圖像

加載和顯示圖像

加載和顯示圖像的代碼片段如清單 13 所示：

清單 13. 加載和顯示圖像

   const PAINT_INTERVAL = 20;  // 循環間隔  
   const PAINT_SLOW_INTERVAL = 20000;     
   const IDLE_TIME_OUT = 3000;  // 空閑超時時間  
 
   // 定義全部圖片 URL 數組，在本例中，所有圖片保存在和網頁同目錄中  
   var imageLocations = [   
   '2006109173628.jpg',   
   '2007310132939.jpg',   
   '200733094828-1.jpg'  
   ];   
  // 加載圖片  
   function loadImages() {   
       var total = imageLocations.length;   
       var imageCounter = 0;   
       var onLoad = function(err, msg) {   
           if (err) {   
               console.log(msg);   
           }   
           imageCounter++;   
           if (imageCounter == total) {   
               loadedImages = true;   
           }   
       }   
 
       for (var i = 0; i < imageLocations.length; i++) {   
           var img = new Image();   
           img.onload = function() { onLoad(false); };   
           img.onerror = function() { onLoad(true, e);};   
           img.src = imageLocations[i];   
           images[i] = img;   
       }   
   }   
   // 繪制圖片  
   function paintImage(index) {   
       if (!loadedImages)   
           return;   
       var image = images[index];   
       var screen_h = canvas.height;   
       var screen_w = canvas.width;   
       var ratio = getScaleRatio({width:image.width, height:image.height},   
{width:screen_w, height:screen_h});   
   var img_h = image.height * ratio;   
   var img_w = image.width * ratio;   
 
   context.drawImage(image, (screen_w - img_w)/2, (screen_h - img_h)/2, img_w, img_h);   
   }

在清單 13 的代碼中，我們更新了主繪制函數 paint，加入了 paintImage 函數，在 paintImage 函數中，利用 Canvas 的 drawImage 函數，在整個 Canvas 區域，盡可能大地縮放圖片并顯示在 Canvas 中，其最佳縮放比例如所示 :

最佳縮放比例示例

這里縮放比例是通過本例所定義的函數 getScaleRatio 來獲得的，其詳細代碼見附件。這樣我們可以在 Canvas 上繪制圖像，繪制圖像的函數定義如下 :

清單 14. 繪制圖像函數

drawImage(image, x, y)   image 為一個圖像或者 Canvas 對象，x，y 為圖片所要放至位置的左上角坐標

但該函數還無法滿足我們的要求，我們需要縮放圖片到一個最佳大小，這就需要 Canvas 繪制圖片函數的另外一種形式：

清單 15. 繪制圖像函數 2

drawImage(image, x, y, width, height)     width, height 為圖像在目標 Canvas 上的大小

該函數將圖片縮放到 width 和 height 所指定的大小并顯示出來。我們通過函數 getScaleRatio 來計算最佳縮放大小，然后就可以通過如清單 15 所示來繪制最佳大小的圖片。

繪制圖片需要傳入一個 image 對象，它一般是一個圖片或者 Canvas 對象。也就是說你可以從一個 URL 中下載圖片顯示在 Canvas 中，也可以在一個 Canvas 中顯示另外一個 Canvas 中繪制的圖形。通過如清單 16 所示的代碼來加載圖片：

清單 16. 加載圖片代碼

var onLoad = function(err, msg) {   
    if (err)   console.log(msg);   
}   
var img = new Image();   
img.onload = function() { onLoad(false); };   
img.onerror = function() { onLoad(true, e);};   
img.src = ‘ myImage.png ’ ;  // 設置源路徑

在整個程序中，我們利用了 setInterval 函數加入了一個定時器來觸發主循環，用于不斷循環等待全部圖片加載。當等待時間超過一個閥值之后，主循環進入 idle 狀態，該循環不僅能夠用于等待全部圖片加載，也可以用于繪制動畫效果，我們在后面將會講到如何利用該主循環來制作動態效果。

繪制縮略圖

下一步需要在導航欄中繪制每個圖片的縮略圖，該縮略圖必須按照最優的大小和間隔排列在導航欄中，同時縮略圖必須經過裁剪，獲得最優的顯示區域。整體效果如圖所示：

縮略圖效果

實現代碼片段如清單 17 所示：

清單 17. 縮略圖代碼

   const HL_OFFSET = 3;     
   const THUMBNAIL_LENGTH = NAVPANEL_HEIGHT - NAVBUTTON_YOFFSET*2;   // 縮略圖顯示區域的高度  
   const MIN_THUMBNAIL_LENGTH = 10;  // 最小縮略圖間隔  
 
   var currentImage = 0;   // 當前圖片序號  
   var firstImageIndex = 0;  // 當前縮略圖中第一張圖片序號  
   var thumbNailCount = 0;  // 當前顯示的縮略圖數  
   var maxThumbNailCount = 0;  // 最大能夠顯示的縮略圖數  
   // 繪制縮略圖  
   function paintThumbNails(inThumbIndex) {   
       if (!loadedImages)   
           return;   
         
       if(inThumbIndex != null) {   
           inThumbIndex -= firstImageIndex;   
       } else {   
           inThumbIndex = -1;   
       }   
 
       var thumbnail_length = rButtonRect.x - lButtonRect.x - lButtonRect.width;   
       maxThumbNailCount = Math.ceil(thumbnail_length / THUMBNAIL_LENGTH);   
       var offset = (thumbnail_length - THUMBNAIL_LENGTH * maxThumbNailCount) /   
(maxThumbNailCount + 1);   
       if (offset < MIN_THUMBNAIL_LENGTH) {   
           maxThumbNailCount = Math.ceil(thumbnail_length/ (THUMBNAIL_LENGTH +   
MIN_THUMBNAIL_LENGTH));   
           offset = (thumbnail_length - THUMBNAIL_LENGTH * maxThumbNailCount) /   
(maxThumbNailCount + 1);   
       }   
 
       thumbNailCount = maxThumbNailCount > imageCount - firstImageIndex?   
imageCount - firstImageIndex: maxThumbNailCount;   
 
       imageRects = new Array(thumbNailCount);   
 
       for (var i = 0; i < thumbNailCount; i++) {   
           image = images[i+firstImageIndex];   
           context.save();   
           var x = lButtonRect.x + lButtonRect.width + (offset+THUMBNAIL_LENGTH)*i;   
           srcRect = getSlicingSrcRect({width:image.width, height:image.height},   
{width:THUMBNAIL_LENGTH, height: THUMBNAIL_LENGTH});   
           imageRects[i] = {   
               image:image,   
               rect: {   
                   x:x+offset,   
                   y:inThumbIndex == i? navRect.y+NAVBUTTON_YOFFSET-HL_OFFSET:   
navRect.y+NAVBUTTON_YOFFSET,   
                   height: THUMBNAIL_LENGTH,   
                   width: THUMBNAIL_LENGTH   
               }   
           }   
 
           context.translate(x, navRect.y);   
           context.drawImage(image, srcRect.x, srcRect.y,   
srcRect.width, srcRect.height,   
offset, imageRects[i].rect.y - navRect.y,   
THUMBNAIL_LENGTH, THUMBNAIL_LENGTH);   
           context.restore();   
       }   
   }

清單 17 的代碼使用了 Canvas 中坐標轉換的方法來繪制每張縮略圖。轉換坐標函數如清單 18 所示：

清單 18. 轉換坐標函數

translate(x, y)  x 為橫軸偏移方向大小，y 為縱軸方向偏移大小

其原理如圖所示：

轉換坐標

Canvas 繪圖的坐標系和大部分操作系統繪圖的坐標系一致，都是左上角為原點，向右為 x 方向，向下為 y 方向。從圖 5 中我們看出，新的坐標原點平移到了 (x,y) 位置，后面的 Canvas 繪圖函數都是以新的原點為基準繪圖。清單 17 在繪制每張縮略圖時，首先轉換原點到縮略圖的左上角，然后在固定的 x 和 y 坐標位置顯示圖片，將這個過程做成一個循環，就繪制了所有等間距的縮略圖。

將圖片顯示到縮略圖中，我們還需要把圖片縮放到其中較短的一邊能夠和縮略圖的邊長重合，同時截去超出縮略圖大小的圖片部分，從而達到最優的顯示縮略圖的效果。其示意圖如所示。

截取最佳圖片部分

為了獲得這種最優的縮略圖顯示效果，我們需要獲得如下信息：1. 原圖中應該截取哪些部分圖片；２ . 縮放多大的比例到目標區域中。本例定義了函數 getSlicingSrcRect 實現了這個功能，它返回一個 rect 對象，包括了應該截取原圖的哪些區域，其詳細代碼見附件。但還需要一個函數來將這個截取的圖片部分縮放到目標區域中，這就用到了 Canvas 繪制圖像函數 drawImage 的另外一種形式：

清單 19. 繪制圖像函數 3

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 　   
 sx, sy, sWidth, sHeight 為原圖中的需要截取的區域，　 dx, dy, dWidth, dHeight 為目標區域的位置大小

該函數截取原圖片的部分區域，然后縮放顯示到目標區域中。我們利用這個函數，就能夠實現截取最佳區域以顯示在縮略圖中的效果。

在繪制縮略圖我們還實現了一個小技巧：縮略圖大小是固定的，但之間的間距是動態調整的，當縮略圖之間的間距小于一個閥值的時候，我們強制最小間隔不小于閥值，詳細代碼請看清單 17。

響應點擊事件

顯示縮略圖以后，我們需要響應點擊事件，即能夠點擊縮略圖，顯示所對應的圖片。同時，我們還需要點擊左右兩邊的按鈕，能夠實現縮略圖的翻頁。這是通過清單 20 所示的代碼實現的：

清單 20 . 響應鼠標點擊事件

   // 加入了鼠標點擊事件的響應  
   this.load = function() {   
       //event binding   
       canvas.onclick = onMouseClick;   
       canvas.onmousemove = onMouseMove;   
}   
// 鼠標點擊事件處理  
   function onMouseClick(event) {   
       point = {x: event.clientX, y:event.clientY};   
       lastMousePos = point;   
 
       if (pointIsInRect(point, lButtonRect)) {   
           nextPane(true);   
       } else if (pointIsInRect(point, rButtonRect)) {   
           nextPane(false);   
       } else {   
           var selectedIndex = findSelectImageIndex(point);   
           if (selectedIndex != -1) {   
               selectImage(selectedIndex);   
           }   
       }   
       updateIdleTime();   
   }   
   // 返回所點擊的縮略圖序號，如果沒有點擊縮略圖則返回 -1   
   function findSelectImageIndex(point) {   
       for(var i = 0; i < imageRects.length; i++) {   
           if (pointIsInRect(point, imageRects[i].rect))   
               return i + firstImageIndex;          
}   
       return -1;   
   }   
   // 將當前圖片序號設為 index，重畫  
   function selectImage(index) {   
       currentImage = index;   
       paint();   
   }   
   // 將縮略圖翻頁，更新縮略圖中第一張圖片的序號  
   function nextPane(previous) {   
       if (previous) {   
           firstImageIndexfirstImageIndex = firstImageIndex - maxThumbNailCount < 0?   
0 : firstImageIndex - maxThumbNailCount;   
       } else {   
           firstImageIndexfirstImageIndex = firstImageIndex + maxThumbNailCount*2 - 1 > imageCount - 1?   
(imageCount - maxThumbNailCount > 0? imageCount - maxThumbNailCount: 0) :   
firstImageIndex + maxThumbNailCount;   
             
       }   
       currentImage = (firstImageIndex <= currentImage &&   
currentImage <= firstImageIndex + maxThumbNailCount)? currentImage : firstImageIndex;   
       paint();   
   }

這里我們通過 2 個變量 firstImageIndex 和 currentImage 來控制縮略圖和當前圖片的顯示，并能夠根據鼠標點擊來改變當前選中的圖片。

加入其他效果

根據當前窗口大小調整 Canvas 大小

當瀏覽器的大小改變的時候，我們的圖片瀏覽器就會由于沒能重畫導致部分區域無法顯示。我們需要根據瀏覽器當前頁面大小來動態定義整個圖片瀏覽器的大小，從而能夠調整整個圖片瀏覽器的最佳大小。代碼如清單 21 所示：

清單 21 .Resize 支持

this.load = function() {   
    //resize   
    resize();   
    window.onresize = resize;   
      
    //event binding   
    canvas.onclick = onMouseClick;   
    canvas.onmousemove = onMouseMove;   
 
    loadImages();          
 
    startLoop();   
    updateIdleTime();   
}   
function resize() {   
    var size = getScreenSize();   
    canvas.width = size.width;   
    canvas.height = size.height;   
    paint();   
}   
 
function getScreenSize() {   
    return { width: document.documentElement.clientWidth,   
ght: document.documentElement.clientHeight};   
}

這里代碼響應了 window 對象的 onresize 事件，從而能夠響應整個瀏覽器頁面大小改變的事件，通過 document.documentElement.clientWidth 和 document.documentElement.clientHeight 這兩個 DOM 屬性，我們獲得了當前頁面顯示范圍大小，從而能夠動態調整 Canvas 的大小到最佳位置。

顯示縮略圖預覽

我們還需要實現這種效果：當鼠標放置在某個縮略圖上方時，能夠顯示一個縮略圖預覽界面，其效果如圖所示：

縮略圖預覽

實現代碼如清單 22 所示：

清單 22 . 縮略圖預覽代碼

const ARROW_HEIGHT = 10;  // 下方三角形的高度  
const BORDER_WRAPPER = 2;   // 邊緣白框的厚度  
// 繪制預覽圖  
function paintHighLightImage(srcRect, imageRect) {   
  var ratio = imageRect.image.width == srcRect.width?   
    
  THUMBNAIL_LENGTH/imageRect.image.width:THUMBNAIL_LENGTH/imageRect.image.height;   
  ratio *= 1.5;   
 
    var destRect = {   
        x:imageRect.rect.x + imageRect.rect.width/2 - imageRect.image.width*ratio/2,   
        y:navRect.y - ARROW_HEIGHT - BORDER_WRAPPER - imageRect.image.height*ratio,   
        width: imageRect.image.width * ratio,   
        height: imageRect.image.height * ratio   
    }   
 
    var wrapperRect = {   
        x: destRect.x - BORDER_WRAPPER,   
        y: destRect.y - BORDER_WRAPPER,   
        width: destRect.width + BORDER_WRAPPER * 2,   
        height: destRect.height + BORDER_WRAPPER * 2   
    }   
 
    var arrowWidth = ARROW_HEIGHT * Math.tan(30/180*Math.PI);   
 
    context.save();   
    context.fillStyle = 'white';   
    context.translate(wrapperRect.x, wrapperRect.y);   
    context.beginPath();   
    context.moveTo(0, 0);   
    context.lineTo(wrapperRect.width, 0);   
    context.lineTo(wrapperRect.width, wrapperRect.height);   
    context.lineTo(wrapperRect.width/2 + arrowWidth, wrapperRect.height);   
    context.lineTo(wrapperRect.width/2, wrapperRect.height+ARROW_HEIGHT);   
    context.lineTo(wrapperRect.width/2 - arrowWidth, wrapperRect.height);   
    context.lineTo(0, wrapperRect.height);   
    context.lineTo(0, 0);   
    context.closePath();   
    context.fill();   
    context.drawImage(imageRect.image, BORDER_WRAPPER, BORDER_WRAPPER,   
tRect.width, destRect.height);   
    context.restore();   
}

在函數 paintHighLightImage 中大量使用了 Canvas 的路徑繪圖函數來繪制這個底部為三角形箭頭，上部為矩形的形狀。感興趣的讀者可以研究這些 Canvas 繪圖函數的使用。

自動隱藏

最后我們在加入一個動態的效果：當鼠標不再移動超過一定時刻的時候，導航欄能夠自動隱藏。其代碼如清單 23 所示：

清單 23 . 自動隱藏代碼

// 加入了自動隱藏導航欄的功能  
   function paint() {   
       context.clearRect(0, 0, canvas.width, canvas.height);   
       paintImage(currentImage);   
       var paintInfo = {inLeftBtn:false, inRightBtn:false, inThumbIndex: null}   
 
       if (lastMousePos && navRect && lButtonRect && rButtonRect) {   
           if (pointIsInRect(lastMousePos, navRect)) {   
               paintInfo.inLeftBtn = pointIsInRect(lastMousePos, lButtonRect);   
               paintInfo.inRightBtn = pointIsInRect(lastMousePos, rButtonRect);   
               if (!paintInfo.inLeftBtn && !paintInfo.inRightBtn) {   
                   var index = findSelectImageIndex(lastMousePos);   
                   if (index != -1) {   
                       paintInfo.inThumbIndex = index;   
                   }   
               }   
           }   
       }   
       if(idleTime && getTime() - idleTime <= IDLE_TIME_OUT) {   
           paintNavigator(paintInfo);   
       }   
   }

當空閑時間超過閥值時，導航欄能夠自動隱藏，這樣瀏覽圖片更加方便。

最終效果

在合并了上述所有清單代碼之后，我們在瀏覽器上就可以看到如圖所示的效果。

完整的圖片瀏覽器效果

完整的代碼請看附件。運行代碼需要 Firefox 1.5, Chrome 1, Safari 3 以上版本的瀏覽器。

總結及展望

本文用圖片瀏覽器的例子來說明 Canvas 的各種函數的使用。該例子也只是一個簡單的 demo，并未涉及更為高級的 Canvas 使用，例如旋轉坐標轉換，繪制曲線，組合圖形，漸變色彩等等。該例子也可以進一步改進，加入更多動態效果并提高效率。本文就不一一敘述。

從上述例子我們也能看到，Canvas 作為 HTML 5 新的元素，其繪圖功能已經很接近操作系統的渲染函數。Canvas 元素可以進行矢量繪圖也可以進行位圖的繪制，在不久的將來，Canvas 還能利用 WebGL 技術支持 3D 繪圖，這為未來的的網頁游戲制作和更為豐富的 Web 用戶體驗提供了便利。在最新的 Google Wave 平臺中，就已經大量使用了 Canvas 技術來渲染用戶界面。我相信，在不久的將來，Canvas 能夠大量被廣大網頁設計師和架構師所使用，并進一步被得到完善和加強。

責任編輯：張偉來源： HTML5China

HTML5