摘要：本文介紹了在大壩安全監測的圖形化展示領域中，HTML5技術對比其他技術所具有的優點，並以水情態勢圖爲例，詳細介紹了利用HTML5技術在網頁上動態繪製相關圖形的方法和步驟。文中透過具體的代碼示例和圖形介面，展示了圖像繪製技術、顏色識別技術、碰撞檢測技術在工程實踐中的具體應用。文章結尾總結了HTML5的技術特點以及在當前環境下的發展前景。
關鍵詞：大壩安全 HTML5 計算機繪圖
在大壩安全管理中，大壩安全監測數據的圖形化展示一直是一個關注熱點，藉助圖形化展示技術，廣大大壩安全管理人員可以快速直觀的評估大壩目前的安全狀況，並能夠根據大壩安全監測數據的變化趨勢，對大壩安全狀況未來的變化態勢做出預測，提前做好相關的準備方案。
當前，基於B/S平臺的圖形展示技術主要有Flash、Sliverlight以及HTML5等。相比較與前兩種技術方案，HTML5技術具有如下優點：
(1)低技術風險。HTML5是HTML的一個新版本。HTML5草案的前身名爲Web Applications 1.0。它於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的HTML工作團隊。2012年12月17日，萬維網聯盟(W3C)正式宣佈凝結了大量網絡工作者心血的HTML5規範已經正式定稿。而flash技術由Adobe公司所有、Sliverlight技術由Microsoft公司所有，選用這些技術，均會存在一定的技術風險。
(2)免插件安裝。由於瀏覽器本身並不支援flash和Sliverlight，因此要使用flash和Sliverlight，必須要先在瀏覽器上安裝安裝相關的插件，由於瀏覽器安全方面的限制，在瀏覽器上安裝插件往往會出現各種各樣的問題，這已經成爲影響用戶體驗的一個重要因素。而現代主流的瀏覽器均可原生支援HTML5，不用安裝插件即可直接使用HTML5技術，這就爲廣大用戶提供了更好的用戶體驗。
(3)跨平臺使用。隨着移動技術的發展，現在的B/S系統不僅在普通的PC端上使用，也越來越多的在移動端平臺(如手機、平板電腦)上使用。HTML5技術在這些移動平臺時擁有良好的相容性。開發者利用HTML5開發出一套系統後，即可以在Windows平臺、iOS平臺、Android平臺上執行，大大減少了開發成本和移植費用。
(4)開發學習成本較低。HTML5由現有的HTML4發展而來，對於廣大的Web開發人員來說，其學習成本較低，能夠很快的掌握相關的開發技術。而反觀flash和Sliverlight，都要重新學習專門的開發語言，開發與學習的成本都較高。
本文將以水情態勢圖的繪製方法爲例，詳細介紹HTML5技術在網頁繪圖方面的具體應用。
水情態勢圖主要用於實時反映大壩的上下游水位，以及與正常蓄水位以及死水位之間的對比關係，用戶可以透過水情態勢圖，直觀準確的瞭解大壩的水位情況。繪製水情態勢圖主要經過了五個主要步驟。(1)加載背景圖。(2)確定邊界特徵顏色值。(3)確定壩頂壩底位置，確定水位與座標之間的對應關係。(4)繪製上下游水位。(5)標註出正常蓄水位、汛限水位以及死水位。各個步驟的具體介紹如下：
1)水情態勢圖的繪製必須以大壩的剖面圖作爲背景，因此，加載剖面圖是繪製工作的基礎。我們必須首先在html頁面中定義一個canvas。
然後我們在javascript中取得這個canvas對象，並在canvas上加載背景圖。加載完成後的圖形如圖1。
2)背景圖加載完成後，我們必須識別出背景圖中表示大壩邊界的特徵顏色值，確定該顏色值後，才能確定大壩圖形的具體範圍。在獲取大壩邊界的顏色值之前，必要先了解HTML5中圖像的.存儲方式。HTML5使用ImageData對象來儲存圖像像素值，它有 width、height和 data 三個屬性，其中 data 屬性就是一個連續數組，圖像的所有像素點的資訊其實是儲存在 data 裏面的。每個像素點的資訊由四個字節組成。第一個字節決定像素的紅色值(r)，第二個字節決定像素的綠色值(g)，第三個字節決定像素的藍色值(b)，第四個字節決定像素的透明度值(a)。每一種顏色值的大小是從 0 到 255，而對於透明度來說：0 代表完全透明，255代表完全不透明。
因此，我們到取得圖片裏一個[x，y]座標像素點的紅色值可以用以下公式：
var redValueForPixel = (y * width + x) * 4;
具體到大壩的剖面圖上，我們將剖面圖放大並打上網格線(如圖2)，圖中的每一個方格即表示一個像素點，我們可以看到大壩的弧形邊框放大後實際上是由鋸齒形的像素點組成了，這些像素點顏色深淺不一，每四行像素點可分爲一組。我們透過研究一組像素點的data 屬性，找出顏色最淺的像素點，並以此點的顏色作爲大壩邊界的特徵顏色值。
我們以圖片的中線作爲起點，向下取得四行像素點的data屬性，然後篩選出所有非空白點的data值。數據如表1。
分析上述表格，我們以218作爲大壩邊界的特徵顏色值。
3)我們從頂部開始，從上往下對圖像進行逐行掃描，當遇到顏色比特徵顏色深的像素點，即可視爲碰到了圖像的上邊界，這個位置即是圖像中大壩的壩頂位置。反之，我們從底部開始，從下往上對圖像進行逐行掃描，遇到顏色比特徵顏色深的像素點，即可視爲碰到了圖像的下邊界，這個位置即是圖像中大壩的壩底位置。
我們透過已有的資料可以得知大壩的壩高和壩頂高程，設大壩的壩高爲damHeight，大壩的壩頂高程爲damTopElevation，根據大壩高度與其座標範圍之間的線形關係，我們可以得到水位與座標值之間的轉換關係，代碼如下：
//根據水位值計算得到座標位置
//@param level 水位值
//@return 水位值所對應的X座標
function getPosition(level){
var val = ((damBottomPosition-damTopPosition)*(damTopElevation-level)/damHeight)+damTopPosition;
return parseInt(val);
}
4)我們仍然採用逐行掃描加顏色比對的方式來繪製上下游水位，我們從水位位置開始一直掃描到壩底位置，如果檢測到了大壩邊界，則繪製一條從該行起點到邊界點的線條。繪製上游水位與繪製下游水位的不同之處在於，上游水位是從左往右進行檢測，下游水位是從右往左進行檢測。繪製上游水位的代碼如下：
//開始繪製
nPath();
//取得canvas上圖像的像素點資訊數組
var imagedata=mageData(leftPoint，0，h，ht);
//從水位位置到壩底位置進行逐行掃描
for(var j=upWaterLevel;j
for(var i=0;i
//計算像素點資訊數組中存放當前像素點r顏色值的位置
k=4*(h*j+i);
//取得當前像素點r顏色值
var rcolor = [k];
//當r顏色值比特徵顏色值深時
if(rcolor //選定線條的起點
To(0， j);
//畫一條從起點到邊界點的直線
To(leftPoint+i， j);
//跳出當前的循環
break;
}
}
//設定填充顏色
kestyle="#C4E1F7";
//結束繪製
ePath();
//填充顏色
ke();
繪製完水面後，我們還需要在水位處繪製一條水位線。
//開始繪製
nPath();
//在上游水位處從左向右掃描
for(var i=0;i //計算像素點資訊數組中存放當前像素點r顏色值的位置