ด้วยการพัฒนาอย่างรวดเร็วของเศรษฐกิจภายในประเทศ ผู้คนจึงมีข้อกำหนดด้านความปลอดภัยที่สูงขึ้นเรื่อยๆ เพื่อป้องกันไม่ให้สถานการณ์ต่อไปนี้เกิดขึ้นคุณต้องพิจารณาติดตั้งระบบรักษาความปลอดภัย: ให้หลักฐานและเบาะแส: ในโรงงาน ธนาคาร การโจรกรรม หรืออุบัติเหตุหลายแห่ง หน่วยงานที่เกี่ยวข้องสามารถตรวจจับกรณีดังกล่าวได้จากข้อมูลวิดีโอซึ่งเป็นสิ่งสำคัญมาก เบาะแส. นอกจากนี้ยังมีข้อพิพาทหรืออุบัติเหตุอยู่บ้าง และความรับผิดชอบของบุคลากรที่เกี่ยวข้องสามารถค้นหาได้ง่ายผ่านการบันทึกวิดีโอ ค่าใช้จ่ายสูงในการป้องกันภัยทางอากาศ: ทุกวันนี้ เมื่อหลายๆ แห่งคิดถึงเรื่องความปลอดภัย พวกเขานึกถึงการจ้างเจ้าหน้าที่รักษาความปลอดภัย ค่าใช้จ่าย 800 หยวนต่อเดือน และทำงาน 3 กะต่อวัน ต้องใช้เงินเกือบ 40,000 หยวนต่อปี ต้นทุนของอุปกรณ์รักษาความปลอดภัยอิเล็กทรอนิกส์นั้นไม่ถูก และไม่จำเป็นต้องเปลี่ยนอุปกรณ์รักษาความปลอดภัยอิเล็กทรอนิกส์ภายในไม่กี่ปี ดังนั้นต้นทุนการป้องกันภัยทางอากาศพลเรือนจึงค่อนข้างสูง ความช่วยเหลือในการป้องกันภัยทางอากาศพลเรือน: ในกรณีส่วนใหญ่ เป็นเรื่องยากมากที่จะพึ่งพาผู้คนทั้งหมดเพื่อความปลอดภัย หลายๆ สิ่งจำเป็นต้องได้รับความช่วยเหลือจากอุปกรณ์รักษาความปลอดภัยอิเล็กทรอนิกส์ (เช่น จอภาพและสัญญาณเตือนภัย) เพื่อให้สมบูรณ์แบบยิ่งขึ้น ต้องใช้ในโอกาสพิเศษ: ภายใต้สภาวะที่ไม่เอื้ออำนวย (ความร้อนสูง เย็น ปิด ฯลฯ) เป็นเรื่องยากสำหรับคนที่จะสังเกตด้วยตาเปล่าได้อย่างชัดเจน หรือสภาพแวดล้อมไม่เหมาะกับผู้พักอาศัย ดังนั้น ต้องใช้อุปกรณ์รักษาความปลอดภัยอิเล็กทรอนิกส์ การปกปิด: การใช้อุปกรณ์รักษาความปลอดภัยอิเล็กทรอนิกส์ คนทั่วไปจะไม่รู้สึกว่าตนถูกเฝ้าติดตามตลอดเวลา และมันถูกปกปิดไว้ รับประกันความปลอดภัยตลอด 24 ชั่วโมง: เพื่อให้บรรลุข้อกำหนดด้านความปลอดภัยอย่างต่อเนื่องตลอด 24 ชั่วโมง จะต้องพิจารณาถึงอุปกรณ์อิเล็กทรอนิกส์ การตรวจสอบระยะไกล: ด้วยการพัฒนาเทคโนโลยีคอมพิวเตอร์และเทคโนโลยีเครือข่าย การตรวจสอบระยะไกลและการดูภาพจากสถานที่ต่าง ๆ จึงเป็นไปได้ ปัจจุบันผู้นำบริษัทจำนวนมากสามารถติดตามสถานการณ์ของสาขาใด ๆ ทั่วโลกแบบเรียลไทม์ผ่านทาง INTERNET ซึ่งเอื้อต่อการ เข้าใจสถานการณ์ได้อย่างทันท่วงที การเก็บรักษาภาพ: การพัฒนาเทคโนโลยีวิดีโอดิจิทัลทำให้สามารถบันทึกภาพผ่านอุปกรณ์จัดเก็บข้อมูลดิจิทัลของคอมพิวเตอร์ ทำให้สามารถบันทึกภาพได้เป็นระยะเวลานานขึ้นและมีภาพที่คมชัดยิ่งขึ้น การจัดการการผลิต: ผู้จัดการสามารถเข้าใจสถานการณ์ในแนวหน้าของการผลิตได้อย่างทันท่วงทีและใช้งานง่าย ซึ่งอำนวยความสะดวกในการบังคับบัญชาและการจัดการ
เนื่องจากความต้องการระบบการตรวจสอบในประเทศจีนมีมาก วันนี้เราจะแนะนำวิธีสร้างส่วนหน้าของระบบการตรวจสอบ
http://www.hightopo.com/demo/metro/demo2.html เข้าสู่หน้าและคลิกขวาที่องค์ประกอบการตรวจสอบเพื่อดูซอร์สโค้ดตัวอย่าง
เอฟเฟกต์ไดนามิกของตัวอย่างนี้เป็นดังนี้:
เรามาสร้างฉากพื้นฐานกันก่อน ใน HT วิธีทั่วไปในการนำเข้าฉากภายนอกเข้าสู่ภายในคือการแยกวิเคราะห์ไฟล์ JSON ข้อดีอย่างหนึ่งของการใช้ไฟล์ JSON เพื่อสร้างฉากก็คือ ฉากเหล่านี้สามารถนำกลับมาใช้ใหม่ได้ ใช้ JSON ถัดไป HT จะใช้ฟังก์ชัน ht.Default.xhrLoad เพื่อโหลดฉาก JSON และใช้ HT-encapsulated 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 ถูกกำหนดให้กับหัวเรื่องตัวแปรโกลบอล dataModel.deserialize(json);//Deserialize graphView.fitContent(true);//ซูมโทโพโลยีการแปลเพื่อแสดงองค์ประกอบกราฟิกทั้งหมด นั่นคือ ให้แสดงองค์ประกอบทั้งหมด});ใน HT เมื่อสร้างออบเจ็กต์ประเภทข้อมูล มันจะได้รับการกำหนดแอตทริบิวต์ id ภายในโดยอัตโนมัติ ซึ่งสามารถรับและตั้งค่าผ่าน data.getId() และ data.setId(id) ค่า id ไม่ได้รับอนุญาตให้แก้ไข หลังจากเพิ่มวัตถุ Data ลงใน DataModel แล้ว คุณสามารถใช้ dataModel.getDataById(id) ค้นหาวัตถุ Data ได้อย่างรวดเร็ว โดยทั่วไป แนะนำให้กำหนดแอตทริบิวต์ id โดยอัตโนมัติโดย HT ตัวระบุความสำคัญทางธุรกิจของผู้ใช้สามารถจัดเก็บไว้ในแอตทริบิวต์ tag ได้ วัตถุสามารถพบได้ผ่าน DataModel#getDataByTag(tag) และรองรับการลบวัตถุข้อมูลผ่าน DataModel#removeDataByTag(tag) ที่นี่เราตั้งค่าแอตทริบิวต์แท็กของวัตถุ Data ใน JSON และรับวัตถุ Data ผ่านฟังก์ชัน dataModel.getDataByTag(tag) ในโค้ด:
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('greenAlarm');ฉันสร้างองค์ประกอบที่สอดคล้องกับแต่ละป้ายกำกับในภาพด้านล่าง:
จากนั้นเราตั้งค่าวัตถุที่ต้องหมุนและแฟลช HT จะห่อหุ้มฟังก์ชัน setRotation (การหมุน) สำหรับการหมุน ด้วยการรับมุมการหมุนปัจจุบันของวัตถุ เราจะเพิ่มเรเดียนตามมุมนี้และเรียกมันเป็นประจำผ่าน 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(camer1.getRotation() + deltaRotation() + deltaRotation/3); ถ้า (เวลา - stairTime > 500) { stairIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time; } สำหรับ (var i = 0; i < 8; i++) {//เนื่องจากมีองค์ประกอบบางอย่างที่คล้ายกัน ชื่อแท็กที่เราตั้งไว้จึงคล้ายกัน แต่ แทนที่ด้วย 1, 2, 3 ดังนั้นเราจึงใช้ for loop เพื่อรับ 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); } ถ้า (วันที่ใหม่ ().getSeconds() % 2 === 1) { yellowAlarm.s('shape.พื้นหลัง', null); redAlarm.s('shape.พื้นหลัง', } else { yellowAlarm.s('shape.พื้นหลัง', 'สีเหลือง'); redAlarm.s('shape.พื้นหลัง', 'สีแดง' }}, 5 );HT ยังสรุปฟังก์ชัน setStyle เพื่อตั้งค่าสไตล์ ซึ่งสามารถเรียกโดยย่อว่า s สำหรับสไตล์เฉพาะ โปรดดูคู่มือ HT สำหรับสไตล์เว็บ:
for (var i = 0; i < 8; i++) {//เนื่องจากมีองค์ประกอบที่คล้ายกัน ชื่อแท็กที่เราตั้งไว้จึงคล้ายกัน แต่จะเปลี่ยนเป็น 1, 2 และ 3 ในภายหลัง ดังนั้นเราจึงใช้ for loop เพื่อให้ได้ 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 (วันที่ใหม่ ().getSeconds() % 2 === 1) { yellowAlarm.s('shape.พื้นหลัง', null); redAlarm.s('shape.พื้นหลัง', null);}else { yellowAlarm.s ('shape.พื้นหลัง', 'redAlarm.s('shape.พื้นหลัง', 'สีแดง');}ตัวอย่างทั้งหมดได้รับการแก้ไขอย่างง่ายดาย ง่ายดายมาก - -
สรุปข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับตัวอย่างการตรวจสอบห้างสรรพสินค้าโดยใช้ HTML5 Canvas ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา . ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!