介绍
这篇文章主要介绍了HTML5画布中如何实现商场监控的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
伴随国内经济的高速发展,人们对安全的要求越来越高。为了防止下列情况的发生,您需要考虑安装安防系统:提供证据与线索:很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件,这个是非常重要的一个线索。还有一些纠纷或事故,也可以通过录像很容易找出相关人员的责任。人防成本高:现在很多地方想到安全就想到要雇佣保安,每个保安每个月800,每天3班倒,一班人员一年就需要将近万4元,相比于电子安防设备成本并不便宜,而且使用电子安防设备几年内就不太需要更换。所以人防成本相对也很高。人防辅助:多数情况下,完全靠人来保证安全是一件很困难的事情,很多事情需要电子保安器材(如监视器,报警器)辅助才更完美。特殊场合必须使用:在一些恶劣条件下(高热、寒冷,封闭等),人很难用肉眼观察清楚,或者环境根本不适合人的停留,必须使用电子安防设备。隐蔽性:使用电子安防设备,一般人不会感觉时时被监控,具有隐蔽性.24小时安全保证:要达到24小时不间断的安全需要,电子设备是必须考虑的。远程监控:随着计算机技术与网络技术的发展,远程监控观看异地图象已经成为可能,现在已经有很多公司的负责人已经可以互联网及时观看世界各地的任何分公司情况,有利于及时了解情况。图象保存:数字录像技术的发展,使得影象可以通过计算机数字存储设备得以保存,可以保存时间更长,图象更清晰。生产管理:管理人员可以及时,直观的了解生产第一线的情况,便于指挥与管理。
本例的动态效果如下:
,我们先来搭建基础场景,在HT中,非常常用的一种方法来将外部场景导入到内部就是靠解析JSON文件,用JSON文件来搭建场景的好处之一就是可以循环利用,我们今天的场景就是利用JSON画出来的。接下来HT将利用,ht.Default。xhrLoad函数载入JSON场景,并用HT封装的DataModel.deserialize (JSON)来反序列化,并将反序列化的对象加入DataModel:
ht.Default.xhrLoad (& # 39; demo2.json& # 39;,,函数(文本),{
,,,var json =, ht.Default.parse(文本);
,,,如果(json.title), document.title =, json.title;//将,JSON 文件中的,titile 赋给全局变量,titile
,,,dataModel.deserialize (json);//反序列化
,,,graphView.fitContent(真正);//缩放平移拓扑以展示所有图元,即让所有的元素都显示出来
}); 在HT中,数据类型对象构造时内部会自动被赋予一个id属性,可通过data.getId()和data.setId (id)获取和设置,数据对象添加到DataModel之后不允许修改id值,可通过dataModel.getDataById (id)快速查找数据对象。一般建议id属性由HT自动分配,用户业务意义的唯一标示可存在标签属性上,通过数据# setTag(标签)函数允许任意动态改变标签值,通过DataModel # getDataByTag(标签)可查找到对应的数据对象,并支持通过DataModel # removeDataByTag(标签)删除数据对象。我们这边通过在JSON中设置数据对象的标签属性,在代码中通过dataModel.getDataByTag(标签)函数来获取该数据对象:
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(旋转)函数,通过获得对象当前的旋转角度,在这个角度的基础上再增加某个弧度,通过setInterval定时调用,这样就能在一定的时间间隔内旋转相同的弧度:
setInterval(函数(){
,,,var time =, new 日期().getTime ();
,,,var deltaTime =, time 作用;lastTime;
,,,var deltaRotation =, deltaTime *, Math.PI /, 180, *, 0.1;
,,,lastTime =,时间;
,,,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 & lt;, 0), {
,,,,,,,,,,,stairIndex =, 8;
,,,,,,,}
,,,,,,,stairTime =,时间;
,,,}
,,,for (var 小姐:=,0;,小姐:& lt;, 8;,我+ +),{//因为有一些相似的元素我们设置的,tag 名类似,只是在后面换成了1,2,3,所以我们通过,for 循环来获取
,,,,,,,var color =, stairIndex ===,小姐:?,& # 39;# F6A623& # 39;,:, & # 39; # CFCFCF& # 39;;
,,,,,,,dataModel.getDataByTag (& # 39; stair_1_& # 39;, +, i)授予(& # 39;shape.border.color& # 39;,,颜色);
,,,,,,,dataModel.getDataByTag (& # 39; stair_2_& # 39;, +, i)授予(& # 39;shape.border.color& # 39;,,颜色);
,,,}
,,,if (new 日期().getSeconds (), %, 2,===, 1), {
,,,,,,,yellowAlarm.s (& # 39; shape.background& # 39;,, null);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
