伴隨國內經濟的高速發展，人們對安全的要求越來越高。為了防止下列情況的發生，您需要考慮安裝安防系統： 提供證據與線索：許多工廠銀行發生偷竊或事故相關機關可以根據錄影資訊偵破案件，這個是非常重要的一個線索。還有一些糾紛或事故，也可以透過錄影很容易找出相關人員的責任。 人防成本高：現在很多地方想到安全就想到要雇用保安，每個保安每個月800，每天3 班倒，一班人員一年就需要將近4 萬元，相比於電子安防設備成本並不便宜，而且使用電子安防設備幾年內就不太需要更換。所以人防成本相對也很高。人防輔助：多數情況下，完全靠人來確保安全是一件很困難的事情，很多事情需要電子保全器材（如監視器、警報器）輔助才更完美。特殊場合必須使用：在一些惡劣條件下（高熱、寒冷、封閉等），人很難用肉眼觀察清楚，或者環境根本不適合人的停留，必須使用電子安防設備。隱蔽性：使用電子安防設備，一般人不會感覺到時時被監控，具有隱密性。 24 小時安全保證：要達到24 小時不間斷的安全需要，電子設備是必須考慮的。遠端監控：隨著電腦科技與網路科技的發展，遠端監控觀看異地圖像已經成為可能，現在已經有很多公司的負責人已經可以INTERNET 及時觀看世界各地的任何分公司情況，有利於及時了解情況。圖象保存：數位錄影技術的發展，使得影像可以透過電腦數位儲存設備得以保存，可以保存時間更長，圖象更清晰。生產管理：管理人員可以及時、直覺的了解生產第一線的情況，以便於指揮與管理。
鑑於監控系統在國內的需求量較大，我們今天來跟大家介紹如何創建一個監控系統的前端部分。
http://www.hightopo.com/demo/metro/demo2.html 進入頁面右鍵審查元素可查看範例原始程式碼。
本例的動態效果如下：
我們先來搭建基礎場景，在HT 中，非常常用的一種方法來將外部場景導入到內部就是靠解析JSON 文件，用JSON 文件來搭建場景的好處之一就是可以循環利用，我們今天的場景就是利用JSON 畫出來的。接下來HT 將利用ht.Default.xhrLoad 函數載入JSON 場景，並以HT 封裝的DataModel.deserialize(json) 來反序列化，並將反序列化的物件加入DataModel：
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//將JSON 檔案中的titile 賦給全域變數titile dataModel.deserialize(json);//反序列化graphView.fitContent(true);//縮放平移拓撲以展示所有圖元，即讓所有的元素都顯示出來});在HT 中，Data 型物件建構時內部會自動被賦予一個id 屬性，可透過data.getId() 和data.setId(id) 取得和設置，Data 物件加入到DataModel 之後不允許修改id 值，可透過dataModel.getDataById(id) 快速尋找Data 物件。一般建議id 屬性由HT 自動分配，用戶業務意義的唯一標示可存在tag 屬性上，透過Data#setTag(tag) 函數允許任意動態改變tag 值，透過DataModel#getDataByTag(tag) 可查找到對應的Data 對象，並支援透過DataModel#removeDataByTag(tag) 刪除Data 物件。我們這邊透過在JSON 中設定Data 物件的tag 屬性，在程式碼中透過dataModel.getDataByTag(tag) 函數來取得該Data 物件：
var fan1 = dataModel.getDataByTag('fan1');var fan2 = dataModel.getDataByTag('fan2');var camera1 = dataModel.getDataByTag('camera1');var camera2 = dataModel.getDataByTag('camera3'); = dataModel.getDataByTag('camera3');var redAlarm = dataModel.getDataByTag('redAlarm');var yellowAlarm = dataModel.getDataByTag('yellowAlarm');我在下圖中做了各標籤對應的元素：
接著我們對需要旋轉、閃爍的物件進行設置，HT 中對旋轉封裝了setRotation(rotation) 函數，透過獲得物件當前的旋轉角度，在這個角度的基礎上再增加某個弧度，透過setInterval 定時調用，這樣就能在一定的時間間隔內旋轉相同的弧度：
setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; var deltaRotation = deltaTime * Math.PI / 180 * 0.1; lastTime = time; fan1.setRotation(fan1.setRotation( ) + deltaRotation*3); fan2.setRotation(fan2.getRotation() + deltaRotation*3); camera1.setRotation(camera1.getRotation() + deltaRotation/3); camera2.setRotation(camera2.getRotationRocam() + deltaRotation/3); era2.setRotation(camera2.getRotationRocam() + deltaRotation/3); era3. .getRotation() + deltaRotation/3); if (time - stairTime > 500) { stairIndex--; if (stairIndex < 0) { stairIndex = 8; } stairTime = time; } for (var i = 0; i < 8; i++) {//因為有一些相似的元素我們設定的tag 名類似，只是在後面換成了1、2、3，所以我們透過for 迴圈來取得var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color' , color); } if (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null); } else { yellowAlarm.s('shape.background', 'yellow'); redAlarm.s('shape .background', 'red'); }}, 5);HT 也封裝了setStyle 函數用來設定樣式，可簡寫為s，具體樣式請參考HT for Web 樣式手冊：
for (var i = 0; i < 8; i++) {//因為有一些相似的元素我們設定的tag 名類似，只是在後面換成了1、2、3，所以我們透過for 迴圈來取得var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}我們還對警告燈的閃爍進行了定時控制，如果是偶數秒的時候，就將燈的背景顏色設置為無色，否則，如果是yellowAlarm 則設置為黃色，如果是redAlarm 則設置為紅色：
if (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null);}else { yellowAlarm.s ('shape.background', 'yellow'); redAlarm.s('shape.background', 'red');}整個例子就這麼輕鬆解決了，簡直太輕鬆了。 。 。
總結以上所述是小編給大家介紹的基於HTML5 Canvas 實現商場監控實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！