การปรับปรุงครั้งล่าสุด: 28.04.2016

CSS มีความสามารถในการวางตำแหน่งองค์ประกอบ ซึ่งหมายความว่าเราสามารถวางองค์ประกอบไว้ที่ตำแหน่งเฉพาะบนเพจได้

คุณสมบัติหลักที่ควบคุมตำแหน่งใน CSS คือคุณสมบัติตำแหน่ง คุณสมบัตินี้สามารถรับค่าใดค่าหนึ่งต่อไปนี้:

คงที่ : การวางตำแหน่งองค์ประกอบมาตรฐาน ค่าเริ่มต้น

สัมบูรณ์ : องค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับขอบเขตขององค์ประกอบคอนเทนเนอร์หากคุณสมบัติตำแหน่งไม่คงที่

สัมพันธ์ : องค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งเริ่มต้น โดยทั่วไป วัตถุประสงค์หลักของการวางตำแหน่งแบบสัมพัทธ์ไม่ใช่เพื่อย้ายองค์ประกอบ แต่เพื่อสร้างจุดยึดใหม่สำหรับการวางตำแหน่งที่แน่นอนขององค์ประกอบที่ซ้อนกัน

คงที่ : องค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับหน้าต่างเบราว์เซอร์ ซึ่งช่วยให้คุณสร้างองค์ประกอบคงที่ซึ่งไม่เปลี่ยนตำแหน่งเมื่อเลื่อน

คุณไม่ควรใช้คุณสมบัติ float และประเภทการวางตำแหน่งอื่น ๆ ที่ไม่ใช่แบบคงที่ (นั่นคือประเภทเริ่มต้น) ไปพร้อม ๆ กันกับองค์ประกอบ

ตำแหน่งที่แน่นอน

พื้นที่การดูของเบราว์เซอร์มีขอบบน ล่าง ขวา และซ้าย ขอบทั้งสี่แต่ละด้านมีคุณสมบัติ CSS ที่สอดคล้องกัน: ซ้าย ขวา บน และล่าง ค่าสำหรับคุณสมบัติเหล่านี้ระบุเป็นพิกเซล ems หรือเปอร์เซ็นต์ ไม่จำเป็นต้องตั้งค่าให้ทั้งสี่ด้าน ตามกฎแล้วตั้งค่าเพียงสองค่าเท่านั้น - การเยื้องจากขอบด้านบนและการเยื้องจากขอบด้านซ้าย

บล็อกเค้าโครงใน HTML5 .header ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 100px; ด้านบน: 50px; ความกว้าง: 430px; ความสูง: 100px; สีพื้นหลัง: rgba(128, 0, 0, 0.5); )

สวัสดีชาวโลก

นี่คือองค์ประกอบ div ด้วย ตำแหน่งที่แน่นอนจะเป็น 100 พิกเซลทางด้านซ้ายของเส้นขอบวิวพอร์ต และ 50 พิกเซลจากด้านล่าง

ไม่สำคัญเลยที่หลังจากองค์ประกอบ div นี้จะมีองค์ประกอบอื่นๆ อยู่ด้วย ไม่ว่าในกรณีใด บล็อก div นี้จะถูกวางตำแหน่งโดยสัมพันธ์กับขอบเขตของวิวพอร์ตของเบราว์เซอร์

หากองค์ประกอบที่มีตำแหน่งที่แน่นอนอยู่ในคอนเทนเนอร์อื่น ซึ่งในทางกลับกันมีค่าคุณสมบัติตำแหน่งไม่เท่ากับ static องค์ประกอบนั้นจะถูกวางตำแหน่งโดยสัมพันธ์กับขอบเขตของคอนเทนเนอร์:

การวางตำแหน่งใน HTML5 .outer ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 80px; ด้านบน: 40px; ความกว้าง: 430px; ความสูง: 100px; เส้นขอบ: 1px solid #ccc; ) .inner( ตำแหน่ง: สัมบูรณ์; ซ้าย: 80px; ด้านบน: 40px; ความกว้าง : 50px; ความสูง: 50px; สีพื้นหลัง: rgba(128, 0, 0, 0.5); )

ตำแหน่งสัมพัทธ์

การระบุตำแหน่งสัมพัทธ์ยังระบุโดยใช้ค่าสัมพัทธ์อีกด้วย ในการระบุตำแหน่งเฉพาะที่องค์ประกอบถูกเลื่อนไป จะใช้คุณสมบัติด้านบน ซ้าย ขวา และด้านล่างเดียวกัน:

การวางตำแหน่งใน HTML5 .outer ( ตำแหน่ง: สัมพันธ์; ซ้าย: 80px; ด้านบน: 40px; ความกว้าง: 300px; ความสูง: 100px; เส้นขอบ: 1px solid #ccc; ) .inner( ตำแหน่ง: สัมบูรณ์; ซ้าย: 80px; ด้านบน: 40px; ความกว้าง : 50px; ความสูง: 50px; สีพื้นหลัง: rgba(128, 0, 0, 0.5); )

คุณสมบัติดัชนี z

ตามค่าเริ่มต้น เมื่อองค์ประกอบสองรายการมีเส้นขอบเหมือนกัน องค์ประกอบที่กำหนดไว้ครั้งล่าสุดในมาร์กอัป html จะแสดงทับองค์ประกอบอื่น อย่างไรก็ตาม คุณสมบัติดัชนี z ช่วยให้คุณสามารถเปลี่ยนลำดับขององค์ประกอบเมื่อมีการซ้อนทับได้ คุณสมบัติใช้ตัวเลขเป็นมูลค่าของมัน องค์ประกอบที่มีค่าดัชนี z มากกว่าจะปรากฏที่ด้านบนขององค์ประกอบที่มีค่าดัชนี z น้อยกว่า

ตัวอย่างเช่น:

การวางตำแหน่งในส่วนเนื้อหา HTML5( margin:0; padding:0; ) .content( ตำแหน่ง: สัมพันธ์; ด้านบน: 15px; ซ้าย: 20px; ความกว้าง: 250px; ความสูง: 180px; สีพื้นหลัง: #eee; เส้นขอบ: 1px solid #ccc ; ) .redBlock( ตำแหน่ง: สัมบูรณ์; ด้านบน: 20px; ซ้าย: 50px; ความกว้าง: 80px; ความสูง: 80px; สีพื้นหลัง: สีแดง; ) .blueBlock( ตำแหน่ง: สัมบูรณ์; ด้านบน: 80px; ซ้าย: 80px; ความกว้าง: 80px ; ความสูง: 80px; สีพื้นหลัง: สีฟ้า; )

ตอนนี้เรามาเพิ่มกฎใหม่ให้กับสไตล์บล็อก redBlock:

RedBlock( ดัชนี z: 100; ตำแหน่ง: สัมบูรณ์; บน: 20px; ซ้าย:50px; ความกว้าง: 80px; ความสูง: 80px; สีพื้นหลัง: สีแดง; )

ในที่นี้ ดัชนี z คือ 100 แต่ไม่จำเป็นต้องเป็นตัวเลข 100 เนื่องจากบล็อกที่สองมีดัชนี z ที่ไม่ได้กำหนดไว้และจริงๆ แล้วเป็นศูนย์ สำหรับ redBlock เราสามารถตั้งค่าคุณสมบัติ z-index ให้เป็นค่าใดๆ ที่มากกว่า ศูนย์.

และตอนนี้บล็อกแรกจะทับซ้อนกับบล็อกที่สอง และจะไม่กลับกัน ดังที่เคยเป็นมาในตอนแรก

แท็ก HTML ใช้สำหรับการฝังวัตถุภายในเอกสาร HTML ใช้แท็กนี้เพื่อฝังมัลติมีเดียในหน้าเว็บของคุณ

คุณสมบัติเนื้อหาตัวจัดการเหตุการณ์

แอ็ตทริบิวต์เนื้อหาตัวจัดการเหตุการณ์ เปิดใช้งานคุณเพื่อเรียกใช้สคริปต์จากภายใน HTML ของคุณ สคริปต์จะถูกเรียกใช้เมื่อมี "เหตุการณ์" บางอย่างเกิดขึ้น แอ็ตทริบิวต์เนื้อหาตัวจัดการเหตุการณ์แต่ละรายการเกี่ยวข้องกับเหตุการณ์ที่แตกต่างกัน

ต่อไปนี้เป็นแอตทริบิวต์เนื้อหาตัวจัดการเหตุการณ์ HTML 5 มาตรฐาน

• ทำแท้ง
• ยกเลิก
• เปิดเบลอ
• ออนแคนเพลย์
• oncanplaythrough
• เมื่อมีการเปลี่ยนแปลง
• เมื่อคลิก
• บนเมนูบริบท
• ondblคลิก
• ออนดราจ
• ออนดราเจนด์
• ออนดราเจนเตอร์
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ออนดร็อป
• ความคงทนการเปลี่ยนแปลง
• ว่างเปล่า
• สิ้นสุดแล้ว
• เกิดข้อผิดพลาด
• ออนโฟกัส
• การเปลี่ยนแปลงรูปแบบ
• บนข้อมูลอินพุต
• บนอินพุต
• ไม่ถูกต้อง
• กดปุ่มลง
• onkeypress
• ออนคีย์อัพ
• กำลังโหลด
• ข้อมูลที่กำลังโหลด
• ข้อมูลเมตาที่โหลดไว้
• โหลดเริ่มต้น
• ออนเมาส์ดาวน์
• onmousemove
• เมาส์ออก
• เมาส์โอเวอร์
• ออนเมาส์อัพ
• บนล้อเมาส์
• หยุดชั่วคราว
• กำลังเล่นอยู่
• กำลังเล่นอยู่
• กำลังดำเนินการอยู่
• อัตราการเปลี่ยนแปลง
• พร้อมสถานะการเปลี่ยนแปลง
• เมื่อเลื่อน
• แสวงหา
• ที่กำลังแสวงหา
• การเลือก
• ออนโชว์
• ติดตั้งแล้ว
• เมื่อส่ง
• ระงับ
• อัปเดตตรงเวลา
• การเปลี่ยนแปลงระดับเสียง
• กำลังรออยู่

สำหรับคำอธิบายทั้งหมดของคุณลักษณะเหล่านี้ โปรดดูที่

สมมติว่าอีกสองสามคำเกี่ยวกับการลงทะเบียนส่วนประกอบ ActiveX โดยทั่วไปแล้ว BASIC จะลงทะเบียนส่วนประกอบ ActiveX ทั้งหมดอย่างอิสระ ณ เวลาที่สร้าง การลงทะเบียนประกอบด้วยการกำหนดตัวระบุพิเศษเฉพาะ CLSID ให้กับส่วนประกอบ ActiveX และป้อนลงในรีจิสทรี ฐานข้อมูลวินโดวส์รีจิสทรีของหลายรายการที่แสดงคุณสมบัติของส่วนประกอบและตำแหน่งของส่วนประกอบ เราได้พูดคุยกันเล็กน้อยเกี่ยวกับการลงทะเบียนโปรแกรมในส่วนของ COM และ DCOM เกี่ยวกับการจัดจำหน่ายและการเผยแพร่ส่วนประกอบ ActiveX ที่พัฒนาแล้วทั่วทั้ง เครือข่ายท้องถิ่นหรืออินเทอร์เน็ต นี่เป็นหัวข้อแยกต่างหากและจะกล่าวถึงด้านล่าง

ข้าว. 1.11. การใช้ตัวควบคุม ActiveX ที่สร้างไว้ล่วงหน้าในเบราว์เซอร์

การวางตัวควบคุม ActiveX บนเว็บเพจ
ตัวควบคุม ActiveX เชื่อมต่อกับเอกสาร HTML โดยใช้แท็ก ซึ่งเสนอในมาตรฐานการทำงานของกลุ่ม W3 วัตถุประสงค์ของแท็กนี้ (ใน Netscape Navigator) คือการผสานรวมองค์ประกอบภายนอกเข้ากับ HTML นี่คือไวยากรณ์แท็กที่สมบูรณ์:

คุณลักษณะบางรายการมีความคล้ายคลึงกับคุณลักษณะของแท็กที่รู้จัก ดังนั้นเราจะไม่พิจารณาพวกเขาที่นี่

นี่คือคำอธิบายของแอตทริบิวต์เฉพาะแท็ก:
CIASSID=URL
คุณลักษณะนี้ระบุตัวระบุคลาสขององค์ประกอบการควบคุมที่ถูกเรียก แต่ละโมดูล OCX และแต่ละตัวควบคุม ActiveX ต้องมีตัวระบุคลาสเฉพาะของตัวเอง โดยทั่วไปจะใช้ตัวย่อ CLSID และเป็นสตริงเลขฐานสิบหกที่ค่อนข้างยาว เช่น "017C99A0-8637-llCF-A3A9-00A0C9034 920"

แต่เหตุใดจึงมี "URL" อยู่ในไวยากรณ์ของแอตทริบิวต์นี้ ความจริงก็คือแท็กสามารถใช้เพื่อเชื่อมต่อไม่เพียง แต่ตัวควบคุม ActiveX เท่านั้น แต่ยังรวมถึงวัตถุโปรแกรมอื่น ๆ รวมถึงวัตถุที่ไม่ได้รับการยอมรับจาก "ตัวระบุคลาส" แต่ด้วยวิธีอื่น
เพื่อให้แน่ใจว่าเบราว์เซอร์เกี่ยวข้องกับไวยากรณ์เดียวเท่านั้น CLSID จะถูกตั้งค่าตามกฎของ URL: ด้านซ้ายมีคำว่า "clsid" และด้านขวามีตัวระบุคลาสจริง
ตัวอย่าง: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

รหัสฐาน=URL
คุณลักษณะนี้ระบุ URL (คราวนี้เป็น URL จริง โดยมีคำนำหน้า "http:" หรือ "ftp:") คุณสามารถแสดงรายการ URL ได้หลายรายการในแอตทริบิวต์นี้ ในกรณีที่เซิร์ฟเวอร์ตัวใดตัวหนึ่งไม่พร้อมใช้งานด้วยเหตุผลบางประการ
แอ็ตทริบิวต์เดียวกันนี้ช่วยให้คุณระบุหมายเลขเวอร์ชันที่จำเป็นสำหรับตัวควบคุม ActiveX ได้
ตัวอย่างเช่น ถ้าคุณเขียน CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
แล้วความพยายามที่จะได้รับ โมดูลนี้มีการพยายาม ActiveX จากอินเทอร์เน็ตไม่เพียงแต่เมื่อไม่ได้อยู่บนคอมพิวเตอร์ของผู้ใช้เท่านั้น แต่ยังรวมถึงเมื่อมีการติดตั้งองค์ประกอบควบคุมด้วย แต่ยังมีมากกว่านั้น หมายเลขเก่าเวอร์ชันที่มากกว่าที่ระบุในแอตทริบิวต์ CODEBASE (ในตัวอย่างของเรา ต้องใช้เวอร์ชันที่เก่ากว่า 4.72.0.1171)

CODETURE=ประเภท MIME
TYPE=ประเภท MIME
แอ็ตทริบิวต์ทางเลือกทั้งสองนี้ช่วยให้คุณสามารถระบุประเภท (ในแง่ของมาตรฐาน MIME) ของไฟล์เหล่านั้นที่อ้างอิงโดยแอททริบิวต์ CLASSID (แอททริบิวต์ CODETYPE) และ DATA (แอททริบิวต์ TYPE) สำหรับตัวควบคุม ActiveX แอตทริบิวต์ CODETYPE (ถ้ามี) จะต้องตั้งค่าเป็น "application/x-oleobject"

ข้อมูล=URL
คุณลักษณะนี้ระบุตำแหน่งของไฟล์ข้อมูลที่อาจจำเป็นสำหรับการควบคุมนี้ในการทำงาน สำหรับตัวควบคุม ActiveX บางตัว จำเป็นต้องมีแอตทริบิวต์นี้ นอกจากนี้ เมื่อใช้แอตทริบิวต์ DATA คุณสามารถรวมไฟล์ที่มีองค์ประกอบควบคุมลงในไฟล์ HTML ในรูปแบบที่เข้ารหัสได้โดยตรง

ประกาศ
โดยทั่วไปคำสั่งนี้จะว่างเปล่า สามารถใช้เพื่อประกาศวัตถุเมื่อไม่ได้ใช้งาน แต่เป็นเพียงพารามิเตอร์ของวัตถุอื่นเท่านั้น ในเวลาเดียวกัน ชุดคุณลักษณะของวัตถุทั้งหมดจะถูกเขียนลงในหน่วยความจำของเบราว์เซอร์ในกรณีที่มีคนต้องการ

บัตรประจำตัวประชาชน=รหัส
จำเป็นต้องจัดระเบียบการโต้ตอบกับวัตถุอื่น ๆ ที่มีตัวระบุ นอกจากนี้ยังสามารถใช้ในรูปแบบการกำหนดที่อยู่ URL (นั่นคือ สามารถปรากฏหลังอักขระ "#" ใน URL)
คุณสามารถสร้างแท็กได้มากเท่าที่คุณต้องการด้วยค่า CLASSID เดียวกัน แต่ค่า ID จะต้องแตกต่างกัน

ชื่อ=รหัส
แอ็ตทริบิวต์ทางเลือกที่สามารถใช้เพื่อเตรียมฟอร์ม HTML (สำหรับสิ่งนี้ แท็กจะต้องอยู่ภายในคู่แท็ก ... ) ข้อมูลที่ส่งจะมีข้อมูลที่เบราว์เซอร์ได้รับจากออบเจ็กต์

รูปร่าง
คุณลักษณะที่ว่างเปล่านี้ทำให้ภายในหน้าต่างที่วัตถุครอบครองพื้นที่เบราว์เซอร์ สามารถเลือกพื้นที่ย่อยเพิ่มเติมและทำเครื่องหมายเป็นลิงก์ URL เพิ่มเติม (ประเภทของฮอตสปอต) พิกัดของภูมิภาคเหล่านี้และ URL ของลิงก์สำหรับภูมิภาคเหล่านี้จะถูกระบุโดยใช้แท็กที่มีแอตทริบิวต์เพิ่มเติมพิเศษ ซึ่งจะต้องอยู่ระหว่าง AND ที่สัมพันธ์กัน

ในบทนี้เราจะเรียนรู้เกี่ยวกับแท็ก วัตถุประสงค์หลักคือการฝังวัตถุบางอย่างลงในหน้า HTML ที่เบราว์เซอร์ไม่สามารถจดจำได้ ตัวอย่างเช่น อาจเป็นเกมแฟลช, รูปภาพ, เสียง, วิดีโอ, แอปเพล็ต Java, องค์ประกอบ ActiveX, PDF

ไวยากรณ์แท็ก HTML

... [] ...

ในส่วนคุณลักษณะมีมาก พารามิเตอร์ที่สำคัญสำหรับการทำงานของวัตถุ (เราจะดูความหมายพร้อมตัวอย่างด้านล่าง) ยิ่งไปกว่านั้น มีเพียงสองสิ่งที่บังคับเท่านั้น: type และ data ระหว่างแท็กอ็อบเจ็กต์ปิดและเปิด คุณสามารถตั้งค่าพารามิเตอร์สำหรับอ็อบเจ็กต์ที่เชื่อมต่อได้ (หากจำเป็น) ผ่านทาง

คุณสมบัติของแท็ก 1. จัดตำแหน่ง

Align - รับผิดชอบในการจัดแนววัตถุให้สัมพันธ์กับองค์ประกอบของหน้าอื่น ๆ

ตัวอย่างเช่น

VALUE สามารถรับค่าต่อไปนี้:

• absmiddle - จัดตำแหน่งให้อยู่กึ่งกลางของบรรทัดปัจจุบัน
• เส้นฐาน , ตรงกลาง - การจัดตำแหน่งไปยังเส้นฐานของเส้นปัจจุบัน
• ด้านล่าง (ค่าเริ่มต้น) - จัดขอบด้านล่างของวัตถุให้ตรงกับข้อความโดยรอบ
• ซ้าย - ตำแหน่งของวัตถุทางด้านซ้าย
• ขวา - ตำแหน่งของวัตถุทางด้านขวา
• top - จัดตำแหน่งให้ตรงกับองค์ประกอบสูงสุดของบรรทัดปัจจุบัน

2.คลาสสิก

Classid - บอกเบราว์เซอร์ว่าจะโหลดโปรแกรม ปลั๊กอิน หรือแอปเพล็ตใด โปรแกรมนี้จะทำงานร่วมกับวัตถุต่อไป

ตัวอย่างเช่น

แทนที่จะเป็น URL คุณสามารถเขียนที่อยู่แบบสัมบูรณ์หรือที่อยู่แบบสัมพันธ์ก็ได้

3.ข้อมูล

ข้อมูลเป็นอาร์กิวเมนต์ที่สำคัญที่สุดเนื่องจากระบุที่อยู่ของออบเจ็กต์

ตัวอย่างเช่น

ที่อยู่วัตถุถูกระบุขึ้นอยู่กับว่าเราระบุ codebase หรือไม่ หากไม่ได้ระบุ codebase ที่อยู่ของวัตถุจะถูกระบุโดยสัมพันธ์กับส่วนของไดเร็กทอรีที่เราอยู่ ฉันอยากจะแนะนำให้ระบุที่อยู่แบบเต็มของวัตถุ

4. ความสูงและความกว้าง

ความสูงและความกว้าง - ตั้งค่าความสูงและความกว้างของวัตถุตามลำดับ สามารถระบุได้ทั้งเป็นพิกเซลและเปอร์เซ็นต์ หากเราตั้งค่าเป็นเปอร์เซ็นต์ค่าจะถูกคำนวณตามพื้นที่ที่อนุญาต

ตัวอย่างเช่น

5. ประเภท

ประเภท - กำหนดประเภท MIME ของข้อมูลที่ระบุในแอตทริบิวต์ข้อมูล เบราว์เซอร์จำเป็นในการเตรียมทรัพยากรที่จำเป็น ส่วนใหญ่แล้วค่าของมันคือ "application/x-shockwave-flash" อย่างแน่นอน

หากเบราว์เซอร์ไม่รองรับวัตถุ (ซึ่งมักเกิดขึ้นหากไม่ได้ติดตั้ง Adobe flash player) จากนั้นภายในแท็กคุณสามารถระบุข้อความที่จะแจ้งให้ผู้ใช้ทราบว่าไม่สามารถโหลดวัตถุได้

ตัวอย่างเช่น

ขออภัย ไม่สามารถแสดงวัตถุได้ หมายเหตุ 1

เบราว์เซอร์ IE อาจไม่เข้าใจค่าข้อมูลอย่างถูกต้อง ดังนั้นคุณควรระบุที่อยู่ไฟล์อีกครั้งในแท็กพารามิเตอร์:

ตัวอย่าง: นาฬิกาโดยใช้วัตถุ

การใช้วัตถุทำให้คุณสามารถแสดงวัตถุและองค์ประกอบมัลติมีเดียได้อย่างง่ายดาย ตัวอย่างที่ง่ายและชัดเจนที่สุดคือนาฬิกา

การสาธิตแสดงการเชื่อมโยงระหว่างกราฟิก 2D ใน HTML5 และ 3D จริง (โดยใช้ WebGL) จุดประสงค์ของบทความนี้คือเพื่อแสดงวิธีการวาดวัตถุ 3 มิติโดยใช้ตาข่ายรูปหลายเหลี่ยม ตาข่ายรูปหลายเหลี่ยมคือชุดของจุดยอด ขอบ และใบหน้าที่กำหนดรูปร่างของวัตถุรูปทรงหลายเหลี่ยมในแบบ 3 มิติ คอมพิวเตอร์กราฟิกและการสร้างแบบจำลองที่มั่นคง

วัตถุ 3 มิติอย่างง่าย

ด้านหน้าประกอบด้วยรูปสามเหลี่ยม รูปสี่เหลี่ยม หรือรูปหลายเหลี่ยมธรรมดาอื่นๆ เพื่อสาธิตสิ่งนี้ เราได้เตรียมวัตถุ 3 มิติง่ายๆ ได้แก่ ลูกบาศก์และทรงกลมหลายเหลี่ยม (ที่มีจำนวนใบหน้าที่แปรผันได้)

วาดวัตถุ 3 มิติขั้นตอนที่ 1: HTML

ตามปกติ (สำหรับการสาธิตแบบแคนวาสทั้งหมด) เรามีวิธีง่ายๆ มาร์กอัป HTML(มีวัตถุหนึ่งชิ้นอยู่ข้างใน แคนวาส):

Wireframe 3D Objects ใน HTML5 ใช้ปุ่มขึ้น/ลงเพื่อควบคุมความโปร่งใสของวัตถุ

การดึงข้อมูลการเริ่มต้นวัตถุ โปรดดูที่:

//var obj = คิวบ์ใหม่ (); //var obj = ทรงกลมใหม่ (6); var obj = ทรงกลมใหม่ (16);

ซึ่งหมายความว่าหากเราต้องการแสดงลูกบาศก์ คุณต้องยกเลิกการใส่เครื่องหมายในบรรทัดแรก หากคุณต้องการแสดงทรงกลมที่มี 6 ใบหน้า คุณต้องเลือกตัวเลือกที่สอง

ขั้นตอนที่ 2. จส

มีไฟล์ JavaScript สามไฟล์ (main.js, meshes.js และ Transformer.js) เรากำลังเผยแพร่สองไฟล์ ไฟล์ที่สาม (transform.js) มีเพียงฟังก์ชันการคำนวณที่เกี่ยวข้องกับการหมุน การปรับขนาด และวัตถุโปรเจ็กต์ ลองดูโค้ด JavaScript แรก:

js/meshes.js // รับฟังก์ชันสีแบบสุ่ม getRandomColor() ( var ตัวอักษร = "0123456789ABCDEF".split(""); var color = "#"; for (var i = 0; i< 6; i++) { color += letters; } return color; } // Подготовка объекта function prepareObject(o) { o.colors = new Array(); // Составим норм o.normals = new Array(); for (var i = 0; i < o.faces.length; i++) { o.normals[i] = ; o.colors[i] = getRandomColor(); } // Составим центр: рассчитать максимальные позиции o.center = ; for (var i = 0; i < o.points.length; i++) { o.center += o.points[i]; o.center += o.points[i]; o.center += o.points[i]; } // Составим расстояния o.distances = new Array(); for (var i = 1; i < o.points.length; i++) { o.distances[i] = 0; } // Вычисляем среднее положение центра o.points_number = o.points.length; o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.faces_number = o.faces.length; o.axis_x = ; o.axis_y = ; o.axis_z = ; } // Объект куб function cube() { // Подготовим точки и граней куба this.points=[ , , , , , , , , , , ]; this.faces=[ , , , , , , , , , , , , , , , , ]; prepareObject(this); } // Объект сфера function sphere(n) { var delta_angle = 2 * Math.PI / n; // Составим вершины (точек) сферы var vertices = ; for (var j = 0; j < n / 2 - 1; j++) { for (var i = 0; i < n; i++) { vertices = ; vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle); vertices = 100 * Math.cos((j + 1) * delta_angle); vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle); } } vertices[(n / 2 - 1) * n] = ; vertices[(n / 2 - 1) * n + 1] = ; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n] = 100; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n + 1] = 0; vertices[(n / 2 - 1) * n + 1] = -100; vertices[(n / 2 - 1) * n + 1] = 0; this.points = vertices; // Составим первый слой var faces = ; for (var j = 0; j < n / 2 - 2; j++) { for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = j * n + i; faces = j * n + i + 1; faces = (j + 1) * n + i + 1; faces = j * n + i; faces = (j + 1) * n + i + 1; faces = (j + 1) * n + i; } faces = ; faces = ; faces = (j + 1) * n - 1; faces = (j + 1) * n; faces = j * n; faces = (j + 1) * n - 1; faces = j * n + n; faces = (j + 2) * n - 1; } for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = (n / 2 - 1) * n; faces = i; faces = i + 1; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n + i + 1; faces = (n / 2 - 2) * n + i; } faces = ; faces = ; faces = (n / 2 - 1) * n; faces = n - 1; faces = 0; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n; faces = (n / 2 - 2) * n + n - 1; this.faces=faces; prepareObject(this); }

ในตอนแรกเราจะต้องเตรียมจุดและส่วนหน้าของวัตถุทั้งหมดให้พร้อม มี 2 ​​ฟังก์ชัน: คิวบ์ (ซึ่งสร้างอาร์เรย์เริ่มต้นสำหรับวัตถุคิวบ์ธรรมดา) และทรงกลม (สำหรับการสร้างทรงกลม) การคำนวณจุดและใบหน้าทั้งหมดสำหรับทรงกลมหลายเหลี่ยมนั้นยากกว่ามาก เมื่อเรามีจุดและพื้นผิวทั้งหมดนี้แล้ว เราจะต้องคำนวณพารามิเตอร์อื่นๆ (เช่น ระยะทาง จุดศูนย์กลางสัมบูรณ์ และแกนสามแกน)

// ตัวแปรภายใน var canvas, ctx; var vAlpha = 0.5; var vShiftX = vShiftY = 0; ระยะทาง = -700; คือ vMouseSens = 0.05; เป็น iHalfX, iHalfY; // ฟังก์ชันการเริ่มต้น sceneInit() ( // การเตรียมผ้าใบและบริบทของวัตถุ canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. ความสูง / 2; // สเกลเริ่มต้นและการแปล scaleObj(, obj); TranslateObj([-obj.center, -obj.center, -obj.center],obj); TranslateObj(, obj); // เชื่อมต่อกับกิจกรรม เอกสารตัวจัดการ onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Main loop setInterval(drawScene, 25); ) // ตัวจัดการเหตุการณ์ OnKeyDown ฟังก์ชั่น handleKeydown(e) ( kCode = ((e.ซึ่ง) || (e.keyCode )); switch (kCode) ( กรณีที่ 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // ปุ่มลง ) ) // ฟังก์ชันตัวจัดการเหตุการณ์ OnMouseMove handleMousemove(e) ( var x = e .pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; ถ้า ((x > 0) && (x< canvas.width) && (y >0) && (ป< canvas.height)) { vShiftY = vMouseSens * (x - iHalfX) / iHalfX; vShiftX = vMouseSens * (y - iHalfY) / iHalfY; } } // Рисуем основную функцию function drawScene() { // Очистить холст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Установить цвет заливки, цвет обводки, толщину линии и глобальной альфа- ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 0.5; ctx.globalAlpha= vAlpha; // Вертикальный и горизонтальный поворот var vP1x = getRotationPar(, , vShiftX); var vP2x = getRotationPar(, , vShiftX); var vP1y = getRotationPar(, , vShiftY); var vP2y = getRotationPar(, , vShiftY); rotateObj(vP1x, vP2x, obj); rotateObj(vP1y, vP2y, obj); // Пересчитываем расстояния for (var i = 0; i < obj.points_number; i++) { obj.distances[i] = Math.pow(obj.points[i],2) + Math.pow(obj.points[i],2) + Math.pow(obj.points[i], 2); } // Подготовить массив с фасадом треугольников (с расчетом максимальное расстояние для каждой грани) var iCnt = 0; var aFaceTriangles = new Array(); for (var i = 0; i < obj.faces_number; i++) { var max = obj.distances]; for (var f = 1; f < obj.faces[i].length; f++) { if (obj.distances[f]] >สูงสุด) สูงสุด = obj.distances [f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], ระยะทาง:สูงสุด); ) aFaceTriangles.sort(sortByDistance); // เตรียมอาร์เรย์ที่มีจุดที่คาดการณ์ไว้ var aPrjPoints = new Array(); สำหรับ (var i = 0; i< obj.points.length; i++) { aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY); } // Нарисовать объект (поверхность) for (var i = 0; i < iCnt; i++) { ctx.fillStyle = aFaceTriangles[i].faceColor; // Начало пути ctx.beginPath(); // Фасад индекс вершины var iFaceVertex = aFaceTriangles[i].faceVertex; // Переместить в исходное положение ctx.moveTo(aPrjPoints, aPrjPoints); // И нарисовать три линии (построить треугольник) for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) { ctx.lineTo(aPrjPoints], aPrjPoints]); } // Закрыть путь, и заполнить треугольник ctx.closePath(); ctx.stroke(); ctx.fill(); } } // Функция сортировки function sortByDistance(x, y) { return (y.distance - x.distance); } // Инициализация if (window.attachEvent) { window.attachEvent("onload", sceneInit); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); sceneInit(); }; window.onload = newonload; } else { window.onload = sceneInit; } }

เมื่อโหลดเพจแล้ว เราจะดำเนินการเริ่มต้นหลัก (ฟังก์ชัน sceneInit) เราสร้างผืนผ้าใบและบริบทของวัตถุ ซึ่งหมายความว่าเราทำมาตราส่วนเริ่มต้นและแปลวัตถุของเราที่เราสร้างขึ้นตั้งแต่เริ่มต้น (ลูกบาศก์หรือลูกบอล) จากนั้นเราจะแนบตัวจัดการเหตุการณ์เข้ากับ OnKeyDown และ OnMouseMove และตั้งเวลาเพื่อเรนเดอร์ฉากหลักของเรา (ฟังก์ชัน DrawScene) อย่าลืมว่าเราสามารถเปลี่ยนพารามิเตอร์ globalAlpha ได้โดยการกดปุ่มขึ้น/ลง