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

基于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 实现地铁站监控的方法，希望能帮助到大家。

推荐阅读

js
深入探讨JSP技术的优缺点

本文详细分析了JSP（JavaServer Pages）技术的主要优点和缺点，帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术，广泛应用于Web开发中。 ... [详细]

蜡笔小新 2024-12-28 11:00:33
css
四载相伴，与51CTO学院共成长

在计算机技术的学习道路上，51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域，51CTO学院始终是我信赖的学习平台。 ... [详细]

蜡笔小新 2024-12-28 08:20:07
css
汇编语言高级特性总结

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

蜡笔小新 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
console
DNN Community 和 Professional 版本的主要差异

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

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

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

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

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

蜡笔小新 2024-12-27 11:10:05
css
解析JSON格式文本并处理数据

本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本，并进行数据处理和保存。 ... [详细]

蜡笔小新 2024-12-26 16:06:09
json
优化页面加载性能

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

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

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

蜡笔小新 2024-12-25 16:34:37
css
企业级项目中 Webpack 配置优化指南

本文详细介绍了在企业级项目中如何优化 Webpack 配置，特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]

蜡笔小新 2024-12-24 14:41:48
css
Ionic框架在HTML5中的应用与实践

本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具，适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件，并解释bundle.js中包含的核心功能，如路由等。 ... [详细]

蜡笔小新 2024-12-23 19:38:45
css
C#编程指南：利用ASP.NET和JavaScript实现带有Fingerprint功能的Web应用登录系统

本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术，用户无需输入传统的登录ID即可完成身份验证，从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能，确保系统的稳定性和可靠性。 ... [详细]

蜡笔小新 2024-11-09 18:14:37

闻人特荷焦黄01965

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

Tags | 热门标签

RankList | 热门文章