基于HTML5 Canvas 实现地铁站监控

伴随国内经济的高速发展，人们对安全的要求愈来愈高。为了防止下列状况的发生，您须要考虑安装安防系统： 提供证据与线索：不少工厂银行发生偷盗或者事故相关机关能够根据录像信息侦破案件，这个是很是重要的一个线索。还有一些纠纷或事故，也能够经过录像很容易找出相关人员的责任。 人防成本高：如今不少地方想到安全就想到要雇佣保安，每一个保安每月 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('camera2');
var 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.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {//由于有一些类似的元素咱们设置的 tag 名相似，只是在后面换成了一、二、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 名相似，只是在后面换成了一、二、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');
}

整个例子就这么轻松地解决了，简直过轻松了。。。

有兴趣继续了解的小伙伴能够进入 HT for Web 官网查看各个手册进行学习。