当前位置: 开发笔记 > 前端 > 正文

基于HTML5Canvas实现地铁站监控

作者：闻人特荷焦黄01965 | 来源：互联网 | 2022-10-15 14:48

伴随国内经济的高速发展，人们对安全的要求越来越高。为了防止下列情况的发生，您需要考虑安装安防系统：提供证据与线索：很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件，这个是非常重要的一个线索。本文我们就和大家分享基于HTML5Canvas实现地铁站监控的实现。

伴随国内经济的高速发展，人们对安全的要求越来越高。为了防止下列情况的发生，您需要考虑安装安防系统：提供证据与线索：很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件，这个是非常重要的一个线索。本文我们就和大家分享基于HTML5 Canvas地铁站监控的实现。

本例的动态效果如下：

我们先来搭建基础场景，在 HT 中，非常常用的一种方法来将外部场景导入到内部就是靠解析 JSON 文件，用 JSON 文件来搭建场景的好处之一就是可以循环利用，我们今天的场景就是利用 JSON 画出来的。接下来 HT 将利用 ht.Default.xhrLoad 函数载入 JSON 场景，并用 HT 封装的 DataModel.deserialize(json) 来反序列化，并将反序列化的对象加入 DataModel：

ht.Default.xhrLoad(&＃39;demo2.json&＃39;, 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(&＃39;fan1&＃39;);
var fan2 = dataModel.getDataByTag(&＃39;fan2&＃39;);
var camera1 = dataModel.getDataByTag(&＃39;camera1&＃39;);
var camera2 = dataModel.getDataByTag(&＃39;camera2&＃39;);
var camera3 = dataModel.getDataByTag(&＃39;camera3&＃39;);
var redAlarm = dataModel.getDataByTag(&＃39;redAlarm&＃39;);
var yellowAlarm = dataModel.getDataByTag(&＃39;yellowAlarm&＃39;);

我在下图中做了各标签对应的元素：

接着我们对需要旋转、闪烁的对象进行设置，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 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
        var color = stairIndex === i ? &＃39;#F6A623&＃39; : &＃39;#CFCFCF&＃39;;
        dataModel.getDataByTag(&＃39;stair_1_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
        dataModel.getDataByTag(&＃39;stair_2_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s(&＃39;shape.background&＃39;, null);
        redAlarm.s(&＃39;shape.background&＃39;, null);
    }
    else {
        yellowAlarm.s(&＃39;shape.background&＃39;, &＃39;yellow&＃39;);
        redAlarm.s(&＃39;shape.background&＃39;, &＃39;red&＃39;);
    }
}, 5);

HT 还封装了 setStyle 函数用来设置样式，可简写为 s，具体样式请参考 HT for Web 样式手册：

for (var i = 0; i <8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
    var color = stairIndex === i ? &＃39;#F6A623&＃39; : &＃39;#CFCFCF&＃39;;
    dataModel.getDataByTag(&＃39;stair_1_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
    dataModel.getDataByTag(&＃39;stair_2_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
}

我们还对“警告灯”的闪烁进行了定时控制，如果是偶数秒的时候，就将灯的背景颜色设置为“无色”，否则，如果是 yellowAlarm 则设置为“黄色”，如果是 redAlarm 则设置为“红色”：

if (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s(&＃39;shape.background&＃39;, null);
    redAlarm.s(&＃39;shape.background&＃39;, null);
}
else {
    yellowAlarm.s(&＃39;shape.background&＃39;, &＃39;yellow&＃39;);
    redAlarm.s(&＃39;shape.background&＃39;, &＃39;red&＃39;);
}

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

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

伴随国内经济的高速发展，人们对安全的要求越来越高。为了防止下列情况的发生，您需要考虑安装安防系统：提供证据与线索：很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件，这个是非常重要的一个线索。还有一些纠纷或事故，也可以通过录像很容易找出相关人员的责任。人防成本高：现在很多地方想到安全就想到要雇佣保安，每个保安每个月 800，每天 3 班倒，一班人员一年就需要将近 4 万元，相比于电子安防设备成本并不便宜，而且使用电子安防设备几年内就不太需要更换。所以人防成本相对也很高。人防辅助：多数情况下，完全靠人来保证安全是一件很困难的事情，很多事情需要电子保安器材（如监视器、报警器）辅助才更完美。特殊场合必须使用：在一些恶劣条件下（高热、寒冷、封闭等），人很难用肉眼观察清楚，或者环境根本不适合人的停留，必须使用电子安防设备。隐蔽性：使用电子安防设备，一般人不会感觉时时被监控，具有隐蔽性。24 小时安全保证：要达到 24 小时不间断的安全需要，电子设备是必须考虑的。远程监控：随着计算机技术与网络技术的发展，远程监控观看异地图象已经成为可能，现在已经有很多公司的负责人已经可以 INTERNET 及时观看世界各地的任何分公司情况，有利于及时了解情况。图象保存：数字录像技术的发展，使得影象可以通过计算机数字存储设备得以保存，可以保存时间更长，图象更清晰。生产管理：管理人员可以及时、直观的了解生产第一线的情况，便于指挥与管理。

鉴于监控系统在国内的需求量较大，对于大范围的监控，如地铁站，更是需要监控系统来防止意外的发生，今天我们给大家介绍一下如何创建一个地铁站监控系统的前端部分。

http://www.hightopo.com/demo/... 进入页面右键“审查元素”可查看例子源代码。

本例的动态效果如下：

ht.Default.xhrLoad(&＃39;demo2.json&＃39;, function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

var fan1 = dataModel.getDataByTag(&＃39;fan1&＃39;);
var fan2 = dataModel.getDataByTag(&＃39;fan2&＃39;);
var camera1 = dataModel.getDataByTag(&＃39;camera1&＃39;);
var camera2 = dataModel.getDataByTag(&＃39;camera2&＃39;);
var camera3 = dataModel.getDataByTag(&＃39;camera3&＃39;);
var redAlarm = dataModel.getDataByTag(&＃39;redAlarm&＃39;);
var yellowAlarm = dataModel.getDataByTag(&＃39;yellowAlarm&＃39;);

我在下图中做了各标签对应的元素：

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 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
        var color = stairIndex === i ? &＃39;#F6A623&＃39; : &＃39;#CFCFCF&＃39;;
        dataModel.getDataByTag(&＃39;stair_1_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
        dataModel.getDataByTag(&＃39;stair_2_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s(&＃39;shape.background&＃39;, null);
        redAlarm.s(&＃39;shape.background&＃39;, null);
    }
    else {
        yellowAlarm.s(&＃39;shape.background&＃39;, &＃39;yellow&＃39;);
        redAlarm.s(&＃39;shape.background&＃39;, &＃39;red&＃39;);
    }
}, 5);

HT 还封装了 setStyle 函数用来设置样式，可简写为 s，具体样式请参考 HT for Web 样式手册：

for (var i = 0; i <8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
    var color = stairIndex === i ? &＃39;#F6A623&＃39; : &＃39;#CFCFCF&＃39;;
    dataModel.getDataByTag(&＃39;stair_1_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
    dataModel.getDataByTag(&＃39;stair_2_&＃39; + i).s(&＃39;shape.border.color&＃39;, color);
}

if (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s(&＃39;shape.background&＃39;, null);
    redAlarm.s(&＃39;shape.background&＃39;, null);
}
else {
    yellowAlarm.s(&＃39;shape.background&＃39;, &＃39;yellow&＃39;);
    redAlarm.s(&＃39;shape.background&＃39;, &＃39;red&＃39;);
}

以上内容就是基于HTML5 Canvas 实现地铁站监控的方法，希望能帮助到大家。

推荐阅读

html
Docker的安全基准

nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]

蜡笔小新 2024-12-28 13:00:24
html
汇编语言高级特性总结

本文总结了汇编语言中第五至第八章的关键知识点，涵盖间接寻址、指令格式、安全编程空间、逻辑运算指令及数据重复定义等内容。通过详细解析这些内容，帮助读者更好地理解和应用汇编语言的高级特性。 ... [详细]

蜡笔小新 2024-12-27 19:52:28
v8
FastJSON解析与数据提取技巧

探讨如何高效使用FastJSON进行JSON数据解析，特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]

蜡笔小新 2024-12-27 19:49:07
css
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新 2024-12-27 19:32:17
jquery
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
html
DNN Community 和 Professional 版本的主要差异

本文详细解析了 DotNetNuke (DNN) 的两种主要版本：Community 和 Professional。通过对比两者的功能和附加组件，帮助用户选择最适合其需求的版本。 ... [详细]

蜡笔小新 2024-12-27 13:14:08
html
2023年全球运营商网络设备市场预计突破202亿美元

尽管某些细分市场如WAN优化表现不佳，但全球运营商路由器和交换机市场持续增长。根据最新研究，该市场预计在2023年达到202亿美元的规模。 ... [详细]

蜡笔小新 2024-12-27 12:44:44
html
360SRC安全应急响应：从漏洞提交到修复的全过程

本文详细介绍了360SRC平台处理一起关键安全事件的过程，涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例，展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]

蜡笔小新 2024-12-27 11:10:05
css
Git 分布式版本控制系统：远程仓库的深入探讨

本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例，帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]

蜡笔小新 2024-12-25 18:30:21
正则
DLP数据泄露检测原理浅析

最近团队在部署DLP，作为一个技术人员对于黑盒看不到的地方还是充满了好奇心。多次咨询乙方人员DLP的算法原理是什么，他们都以商业秘密为由避而不谈，不得已只能自己查资料学习，于是有了下面的浅见。身为甲方，虽然不需要开发DLP产品，但是也有必要弄明白DLP基本的原理。俗话说工欲善其事必先利其器，只有在懂这个工具的原理之后才能更加灵活地使用这个工具，即使出现意外情况也能快速排错，越接近底层，越接近真相。根据DLP的实际用途，本文将DLP检测分为2部分，泄露关键字检测和近似重复文档检测。 ... [详细]

蜡笔小新 2024-12-25 18:19:32
css
使用npm脚本同时启动多个监听服务的技巧

本文介绍了如何利用npm脚本和concurrently工具，实现本地开发环境中多个监听服务的同时启动，包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]

蜡笔小新 2024-12-25 18:10:18
view
解析猫鼬 findOne 方法返回 null 的原因

本文探讨了在通过 API 端点调用时，使用猫鼬（Mongoose）的 findOne 方法总是返回 null 的问题，并提供了详细的解决方案和建议。 ... [详细]

蜡笔小新 2024-12-25 17:40:33
json
VSCode 自定义代码片段配置：实现类似IDEA的快捷代码段（如sout或psvm）

本文详细介绍如何在VSCode中配置自定义代码片段，使其具备与IDEA相似的代码生成快捷键功能。通过具体的Java和HTML代码片段示例，展示配置步骤及效果。 ... [详细]

蜡笔小新 2024-12-25 17:10:13
json
优化页面加载性能

在网页开发中，页面加载速度是一个关键的用户体验因素。为了提升加载效率，避免在PageLoad事件中进行大量数据绑定操作，可以采用异步加载和特定控件来优化页面加载过程。 ... [详细]

蜡笔小新 2024-12-25 16:57:49
正则
深入解析JMeter中的JSON提取器及其应用

本文详细介绍了如何在JMeter中使用JSON提取器来获取和处理API响应中的数据。特别是在需要将一个接口返回的数据作为下一个接口的输入时，JSON提取器是一个非常有用的工具。 ... [详细]

蜡笔小新 2024-12-25 16:34:37

闻人特荷焦黄01965

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章