ไม่กี่วันที่ผ่านมาฉันใช้สไตล์ CSS และ JS เพื่อจ่ายส่วยให้กับอินเทอร์เฟซที่คล้ายกันของ GITHUB404 ในเวลาเดียวกันฉันเพิ่งติดต่อ Canvas ของ GitHub404 ผ่าน Canvas
การเรนเดอร์
ไดเรกทอรีไฟล์ ทรัพยากรไฟล์ซอร์สโค้ดไฟล์และรูปภาพจะได้รับในตอนท้ายของบทความ
รหัสร่างกายของหน้าเว็บ
นี่คือองค์ประกอบระดับสูงและสูงสำหรับผืนผ้าใบ แท็ก IMG เหล่านี้ถูกโหลดออกมาจากรูปภาพเหล่านี้และเราไม่จำเป็นต้องโหลดใน JS แล้วตั้งค่ารูปภาพให้แสดง: ไม่มี
<body> <canvas id = mycanvas width = 1680 ความสูง = 630 style = margin: 0; ไม่มี> <img src =./images/text.png style = แสดง: ไม่มี> <img src =./images/cat.png style = แสดงผล: ไม่มี> <img src =./cat_shadow.png sty : ไม่มี> <img src =./images/speeder.png style = display: none> <img src =./images/speeder_shadow.png style = display: none> <img src =./images/bu liding_1.png = แสดง: ไม่มี> <img src =./images/building_2.png style = display: none> </body>ส่วน JS
1. ที่นี่ฉันยังคงสร้างวัตถุ JSON ใหม่ที่เรียกว่า GITHUB404 เพื่อห่อหุ้มพารามิเตอร์และวิธีการทั้งหมด
2. สร้างวัตถุของ IMGDATA จากนั้นใช้พารามิเตอร์ที่จำเป็นสำหรับ IMG ทั้งหมดลงใน PS: ด้านบนและซ้ายสำหรับการวางตำแหน่งเมื่อใช้พารามิเตอร์สเกล DrawImage () การเคลื่อนไหวของเมาส์
3. วิธีการ Theinit () ใช้ในการเริ่มต้นซึ่งเป็นอินเทอร์เฟซกับอินเทอร์เฟซภายนอก
4. การใช้วิธีการวาดภาพคือการสำรวจ imgdata [] ในวงวนในรอบและจากนั้นกำหนดค่าในที่สุด ให้ความสนใจกับการใช้วิธี ctx.clearrect () เพื่อล้างผ้าใบว่างเปล่าที่ว่างเปล่าแรกที่ว่างเปล่า
<script> vargithub404 = {imgdata: {// บันทึกข้อมูลของรูปภาพทั้งหมดในวัตถุ JSON bg: {top: 0, ซ้าย: 110, // ด้านบนและซ้ายสำหรับการวางตำแหน่ง มาตราส่วนเส้นทางรูปภาพ: 0.06, // เมื่อเมาส์เคลื่อนที่สัดส่วนของการเคลื่อนไหวที่สอดคล้องกันของรูปภาพ}, building_2: {top: 133, ซ้าย: 1182, src: './images/building_2 .png', สเกล: 0.05 ,}, building_1: {top: 79, ซ้าย: 884, src: './images/buliding_1.png', มาตราส่วน: 0.03,}, speeder_shadow: {top: 261, ซ้าย: 77666666666 ,, src: './images /speeder_shadow.png ', มาตราส่วน: 0.01,}, cat_shadow: {top: 288, ซ้าย: 667, src:' ./image_shadow.png ', สเกล: 0.02,}, spe eder: {top: 146, ซ้าย: 777 , src: './images/speeder.png', มาตราส่วน: 0.01,}, cat: {top: 88, ซ้าย: 656, src: './images/cale.png', สเกล: 0.05,}, ข้อความ: {top: 70, ซ้าย: 364, src: './images/text.png', มาตราส่วน: 0.03,}, rate_w: 0, rate_h: 0, // bias ออฟเซ็ต Field_width: 1680, field_heigh: 370 ความสูงพื้นหลังและความกว้างผืนผ้าใบ: document.queerySelector ('#MyCanvas'), // รับองค์ประกอบ Canvas init: function () {// วิธีการโหลดเริ่มต้น .SE.SE.SE.SE.SE.SE.SE.SE TRAATEWH (); document.body.client windth; ctx = this.canvas.getcon text ('2d'); ] .let; }, attainmousevent: function () {var the = this;时重新画图的方法ให้ ctx = this.canvas.getContext ('2d'); image = new image (); ด้านบนวางพารามิเตอร์เมื่อวาดภาพด้านล่าง , image.width, image.height);}}} window.onload = function () {// เพียงแค่เรียกใช้วิธีการเริ่มต้นของ github404 เพื่อห่อหุ้มข้อมูล github404.init ();} </script> สรุปเวลานี้ใช้ผ้าใบเพื่อทำเอฟเฟกต์แบบไดนามิกนี้ให้เสร็จสมบูรณ์ฉันได้เรียนรู้เพิ่มเติมเกี่ยวกับการใช้งานผ้าใบ ทำให้ฉันในเวลาเดียวกัน
มีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับวิธีการจัดระเบียบรหัสสำหรับข้อมูลบรรจุภัณฑ์และวิธีการด้วยวัตถุ JSON
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้