چگونه یک شیء پیچیده html بسازیم. برخی از ویژگی های تگ OBJECT. اشیاء سه بعدی را ترسیم کنید

اخرین بروزرسانی: 28.04.2016

CSS قابلیت های موقعیت یابی عنصر را فراهم می کند، به این معنی که می توانیم یک عنصر را در یک مکان خاص در صفحه قرار دهیم.

ویژگی اصلی که موقعیت یابی را در CSS کنترل می کند، ویژگی position است. این ویژگی می تواند یکی از مقادیر زیر را داشته باشد:

    static: تعیین موقعیت عنصر استاندارد، مقدار پیش فرض

    مطلق: اگر خاصیت موقعیت آن ثابت نباشد، عنصر نسبت به مرزهای عنصر ظرف قرار می گیرد

    relative : عنصر نسبت به موقعیت پیش فرض خود قرار می گیرد. به طور معمول، هدف اصلی از موقعیت یابی نسبی، حرکت دادن یک عنصر نیست، بلکه ایجاد یک نقطه لنگر جدید برای موقعیت یابی مطلق عناصر تودرتو آن است.

    ثابت: عنصر نسبت به پنجره مرورگر قرار می گیرد، این به شما امکان می دهد عناصر ثابتی ایجاد کنید که هنگام پیمایش موقعیت خود را تغییر نمی دهند.

شما نباید به طور همزمان خاصیت float و هر نوع موقعیت یابی غیر از static (یعنی نوع پیش فرض) را به یک عنصر اعمال کنید.

موقعیت یابی مطلق

ناحیه مشاهده مرورگر دارای لبه بالا، پایین، راست و چپ است. هر یک از این چهار یال دارای ویژگی CSS مربوطه است: چپ، راست، بالا و پایین. مقادیر این ویژگی ها بر حسب پیکسل، ems یا درصد مشخص می شود. لازم نیست مقادیر را برای هر چهار طرف تنظیم کنید. به عنوان یک قاعده، فقط دو مقدار تنظیم می شود - تورفتگی از لبه بالای لبه و فرورفتگی از لبه سمت چپ سمت چپ.

طرح بندی بلوک در HTML5. header ( موقعیت: مطلق؛ سمت چپ: 100 پیکسل؛ بالا: 50 پیکسل؛ عرض: 430 پیکسل؛ ارتفاع: 100 پیکسل؛ رنگ پس‌زمینه: rgba (128، 0، 0، 0.5)؛ )

سلام دنیا

در اینجا یک عنصر div با موقعیت یابی مطلق 100 پیکسل در سمت چپ حاشیه ویوپورت و 50 پیکسل از پایین خواهد بود.

خیلی مهم نیست که بعد از این عنصر div چند عنصر دیگر وجود داشته باشد. این بلوک div در هر صورت نسبت به مرزهای درگاه دید مرورگر قرار می گیرد.

اگر عنصری با موقعیت مطلق در محفظه دیگری قرار داشته باشد، که به نوبه خود دارای مقدار خاصیت موقعیت است که برابر با static نیست، آنگاه عنصر نسبت به مرزهای ظرف قرار می گیرد:

موقعیت یابی در HTML5 .outer ( موقعیت: مطلق؛ سمت چپ: 80 پیکسل؛ بالا: 40 پیکسل؛ عرض: 430 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 1 پیکسل ثابت #cccc؛ ) .inner( موقعیت: مطلق؛ چپ: 80 پیکسل؛ بالا: 40 پیکسل؛ عرض : 50 پیکسل؛ ارتفاع: 50 پیکسل؛ رنگ پس‌زمینه: rgba (128، 0، 0، 0.5)؛ )

موقعیت یابی نسبی

موقعیت نسبی نیز با استفاده از مقدار نسبی مشخص می شود. برای تعیین موقعیت خاصی که عنصر به آن جابجا می شود، از همان ویژگی های بالا، چپ، راست، پایین استفاده می شود:

موقعیت یابی در HTML5 .outer ( موقعیت: نسبی؛ سمت چپ: 80 پیکسل؛ بالا: 40 پیکسل؛ عرض: 300 پیکسل؛ ارتفاع: 100 پیکسل؛ حاشیه: 1 پیکسل جامد #cccc؛ ) .inner( موقعیت: مطلق؛ سمت چپ: 80 پیکسل؛ بالا: 40 پیکسل؛ عرض : 50 پیکسل؛ ارتفاع: 50 پیکسل؛ رنگ پس‌زمینه: rgba (128، 0، 0، 0.5)؛ )

ویژگی z-index

به طور پیش فرض، زمانی که دو عنصر حاشیه یکسانی داشته باشند، عنصری که آخرین بار در نشانه گذاری html تعریف شده است، روی دیگری نمایش داده می شود. با این حال، ویژگی z-index به شما این امکان را می دهد که ترتیب عناصر را هنگامی که روی هم قرار می گیرند تغییر دهید. دارایی یک عدد را به عنوان مقدار خود می گیرد. عناصر با مقدار z-index بزرگتر در بالای عناصر با مقدار z-index کوچکتر ظاهر می شوند.

مثلا:

موقعیت‌یابی در بدنه HTML5( حاشیه: 0؛ بالشتک: 0؛ ) .content( موقعیت: نسبی؛ بالا: 15 پیکسل؛ سمت چپ: 20 پیکسل؛ عرض: 250 پیکسل؛ ارتفاع: 180 پیکسل؛ رنگ پس‌زمینه: #eee؛ حاشیه: 1 پیکسل ثابت #cccc ; ) .redBlock( موقعیت: مطلق؛ بالا: 20 پیکسل؛ چپ: 50 پیکسل؛ عرض: 80 پیکسل؛ ارتفاع: 80 پیکسل؛ رنگ پس زمینه: قرمز؛ ) .blueBlock( موقعیت: مطلق؛ بالا: 80 پیکسل؛ سمت چپ: 80 پیکسل؛ عرض: 80 پیکسل ؛ ارتفاع: 80 پیکسل؛ پس زمینه رنگ: آبی؛ )

حالا بیایید یک قانون جدید به سبک بلوک redBlock اضافه کنیم:

RedBlock( z-index: 100؛ موقعیت: مطلق؛ بالا: 20 پیکسل؛ سمت چپ: 50 پیکسل؛ عرض: 80 پیکسل؛ ارتفاع: 80 پیکسل؛ رنگ پس‌زمینه: قرمز؛ )

در اینجا z-index 100 است. اما لزومی ندارد که عدد 100 باشد. از آنجایی که بلاک دوم دارای z-index تعریف نشده است و در واقع صفر است، برای redBlock می توانیم ویژگی z-index را روی هر مقداری بزرگتر از آن تنظیم کنیم. صفر

و اکنون بلوک اول با بلوک دوم همپوشانی خواهد داشت، و نه برعکس، همانطور که در ابتدا بود.

تگ HTML برای جاسازی یک شی در یک سند HTML استفاده می شود. از این تگ برای جاسازی چند رسانه ای در صفحات وب خود استفاده کنید.

ویژگی های محتوای کنترل کننده رویداد

ویژگی های محتوای کنترل کننده رویداد شما را قادر می سازدبرای فراخوانی یک اسکریپت از داخل HTML خود. اسکریپت زمانی فراخوانی می شود که "رویداد" خاصی رخ دهد. هر ویژگی محتوای کنترل کننده رویداد با یک رویداد متفاوت سروکار دارد.

در اینجا ویژگی های محتوای کنترل کننده رویداد استاندارد HTML 5 آمده است.

  • سقط
  • لغو
  • روشن شدن
  • oncanplay
  • oncanplaythrough
  • در تغییر
  • onclick
  • منوی متنی
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • روی گلبرگ
  • اندراگوور
  • ondragstart
  • رها کردن
  • تغییر طول مدت
  • یک خالی شد
  • به پایان رسید
  • یک خطا
  • متمرکز
  • onformchange
  • onforminput
  • ورودی
  • نامعتبر
  • روی کلید
  • روی کلید
  • onkeyup
  • در حال بارگذاری
  • داده های بارگذاری شده
  • داده های onloaded
  • onloadstart
  • به پایین
  • onmousemove
  • سوار کردن
  • روی موشواره
  • onmouseup
  • چرخ روی موش
  • در مکث
  • در حال پخش
  • در حال پخش
  • در حال پیشرفت
  • onratechange
  • onreadystatechange
  • پیمایش کنید
  • جستجو کرد
  • در حال جستجو
  • را انتخاب کنید
  • در حال نمایش
  • نصب شده است
  • در صورت ارسال
  • تعلیق
  • به روز رسانی به موقع
  • تغییر حجم
  • در انتظار

برای توضیح کامل این صفات ر.ک.

اجازه دهید چند کلمه بیشتر در مورد ثبت اجزای ActiveX بگوییم. به طور معمول، BASIC به طور مستقل تمام اجزای ActiveX را در زمان ایجاد آنها ثبت می کند. ثبت شامل تخصیص یک شناسه منحصر به فرد ویژه CLSID به جزء ActiveX و وارد کردن آن به رجیستری است. پایگاه داده ویندوزرجیستری از چندین مدخل که ویژگی های جزء و مکان آن را مشخص می کند. قبلاً در مورد ثبت برنامه ها در بخش های COM و DCOM کمی صحبت کرده ایم. با توجه به توزیع و انتشار اجزای توسعه یافته ActiveX در سراسر شبکه محلییا اینترنت، پس این یک موضوع جداگانه است و در زیر مورد بحث قرار خواهد گرفت.

برنج. 1.11. استفاده از کنترل اکتیو ایکس از پیش ساخته شده در مرورگر

قرار دادن کنترل های ActiveX در صفحات وب
کنترل‌های ActiveX با استفاده از برچسبی که در یکی از استانداردهای کاری کنسرسیوم W3 پیشنهاد شده است، به اسناد HTML متصل می‌شوند. هدف این تگ (در 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"

CODEBASE=URL
این ویژگی URL را مشخص می کند (این بار یک URL واقعی، با پیشوند "http:" یا "ftp:"). در صورتی که یکی از سرورها به دلایلی در دسترس نباشد، می‌توانید چندین URL را در این ویژگی فهرست کنید.
همین ویژگی به شما امکان می دهد شماره نسخه مورد نیاز برای کنترل های ActiveX را مشخص کنید.
برای مثال، اگر CODEBASE="http://activex.microsoft.com/controls/iexplorer/istock.ocx# Version=4.72,0.1171" را بنویسید
سپس تلاش برای بدست آوردن این ماژول ActiveX از اینترنت نه تنها زمانی که در رایانه کاربر نیست، بلکه زمانی که عنصر کنترل نصب شده است، تلاش می شود، اما تعداد بیشتری دارد. شماره قدیمینسخه ای از آنچه در ویژگی CODEBASE مشخص شده است (در مثال ما، نسخه ای که قدیمی تر از 4.72.0.1171 نباشد مورد نیاز است).

CODETURE=MIME-type
TYPE=MIME-type
این دو ویژگی اختیاری به شما این امکان را می‌دهند که انواع (از نظر استاندارد MIME) فایل‌هایی را که با ویژگی‌های CLASSID (ویژگی CODETYPE) و DATA (ویژگی TYPE) ارجاع می‌شوند، مشخص کنید. برای کنترل‌های ActiveX، ویژگی CODETYPE، در صورت وجود، باید روی "application/x-oleobject" تنظیم شود.

DATA=URL
این ویژگی مکان فایل داده ای را که ممکن است برای عملکرد این کنترل مورد نیاز باشد را مشخص می کند. برای برخی از کنترل های ActiveX، این ویژگی مورد نیاز است. علاوه بر این، با استفاده از ویژگی DATA، می توانید فایل حاوی عنصر کنترل را مستقیماً به صورت کدگذاری شده در فایل HTML قرار دهید.

اعلام
معمولاً این عبارت خالی است. می توان از آن برای اعلان یک شی استفاده کرد زمانی که اجرا نمی شود، اما تنها پارامتری از یک شی دیگر است. در همان زمان، در صورتی که شخصی به آنها نیاز داشته باشد، کل مجموعه ویژگی های شی در حافظه مرورگر نوشته می شود.

شناسه= شناسه
برای سازماندهی تعامل با سایر اشیاء که دارای شناسه هستند، مورد نیاز است. همچنین می تواند در طرح آدرس دهی URL استفاده شود (یعنی می تواند بعد از کاراکتر "#" در URL ظاهر شود).
شما می توانید هر تعداد تگ که دوست دارید با همان مقدار CLASSID ایجاد کنید، اما مقادیر شناسه آنها باید متفاوت باشد.

نام= شناسه
یک ویژگی اختیاری که می تواند هنگام تهیه یک فرم HTML استفاده شود (برای این، تگ باید داخل یک جفت تگ باشد ... ). داده های ارسال شده حاوی اطلاعات دریافت شده توسط مرورگر از شی خواهد بود.

شکل ها
این ویژگی خالی این امکان را فراهم می کند که در پنجره ای که شی در فضای مرورگر اشغال می کند، مناطق فرعی اضافی را انتخاب کرده و آنها را به عنوان پیوندهای URL اضافی (نوعی نقاط داغ) علامت گذاری کنید. مختصات این مناطق و URL پیوندها برای آنها با استفاده از برچسب هایی با ویژگی های اضافی خاص مشخص می شود که باید بین AND مربوط به آن قرار گیرند.

در این درس با تگ آشنا می شویم. هدف اصلی آن جاسازی برخی از اشیاء در یک صفحه HTML است که مرورگر قادر به تشخیص آنها نیست. به عنوان مثال، این می تواند یک بازی فلش، تصاویر، صدا، ویدئو، اپلت های جاوا، عناصر ActiveX، PDF باشد.

نحو تگ HTML

... [] ...

در بخش ویژگی ها بسیار وجود دارد پارامترهای مهمبرای عملکرد شی (در زیر به معانی آنها با مثال هایی نگاه خواهیم کرد). علاوه بر این، تنها دو مورد اجباری وجود دارد: نوع و داده. بین تگ های بسته شدن و باز کردن، می توانید پارامترهایی را برای شی متصل (البته در صورت نیاز) از طریق تنظیم کنید.

ویژگی های برچسب 1. تراز کردن

Align - مسئول تراز کردن شی نسبت به سایر عناصر صفحه است.

مثلا

VALUE می تواند مقادیر زیر را بگیرد:

  • absmiddle - به وسط خط فعلی تراز کنید
  • خط پایه، تراز وسط به خط پایه خط فعلی
  • bottom (پیش‌فرض) - حاشیه پایین شیء را با متن اطراف تراز می‌کند
  • سمت چپ - محل شی در سمت چپ
  • سمت راست - محل شی در سمت راست
  • بالا - با بالاترین عنصر خط فعلی تراز کنید
2.کلاسید

Classid - به مرورگر می گوید که کدام برنامه، افزونه یا اپلت را بارگیری کند. این برنامه بیشتر با شی کار خواهد کرد

مثلا

به جای URL، می توانید یک آدرس مطلق یا نسبی بنویسید.

3. داده ها

داده مهم ترین آرگومان است زیرا آدرس شی را مشخص می کند.

مثلا

آدرس آبجکت بسته به اینکه ما کد پایه را مشخص کرده ایم مشخص می شود. اگر codebase مشخص نشده باشد، آدرس شی نسبت به بخشی از دایرکتوری که در آن قرار داریم مشخص می شود. من توصیه می کنم آدرس کامل شی را مشخص کنید.

4. ارتفاع و عرض

Height and Width - ارتفاع و عرض جسم را به ترتیب تنظیم کنید. می توان هم به صورت پیکسل و هم درصد مشخص کرد. اگر آن را به صورت درصد قرار دهیم، مقادیر بر اساس مساحت مجاز محاسبه می شود.

مثلا

5. تایپ کنید

Type - نوع MIME داده های مشخص شده در ویژگی داده را مشخص می کند. لازم است مرورگر منابع لازم را آماده کند. اغلب مقدار آن دقیقاً "application/x-shockwave-flash" است.

اگر مرورگر از اشیاء پشتیبانی نمی کند (اگر Adobe flash player نصب نشده باشد، اغلب اتفاق می افتد)، سپس در داخل برچسب می توانید متنی را مشخص کنید که به کاربر اطلاع می دهد که بارگیری شی غیرممکن است.

مثلا

با عرض پوزش، شیء قابل نمایش نیست توجه 1

ممکن است مرورگر اینترنت اکسپلورر مقدار داده را به درستی درک نکند، بنابراین باید آدرس فایل را دوباره در تگ های param مشخص کنید:

مثال: ساعت با استفاده از شی

با استفاده از شی، می توانید اشیاء و عناصر چند رسانه ای را به راحتی نمایش دهید. ساده ترین و واضح ترین مثال ساعت است.

دمو پلی بین گرافیک دو بعدی در HTML5 و سه بعدی واقعی (با استفاده از WebGL) را نشان می دهد. هدف از این مقاله نشان دادن نحوه ترسیم اشیاء سه بعدی با استفاده از مش چند ضلعی است. مش چند ضلعی مجموعه ای از رئوس، لبه ها و وجوه است که شکل اجسام چند وجهی را به صورت سه بعدی مشخص می کند. گرافیک کامپیوتریو مدلسازی جامد

اشیاء سه بعدی ساده

نما از مثلث ها، چهار گوش ها یا چند ضلعی های ساده دیگر تشکیل شده است. برای نشان دادن این، ما اشیاء سه بعدی ساده - یک مکعب و کره های چند وجهی (با تعداد متغیر چهره) آماده کردیم.

رسم اشیاء سه بعدی مرحله 1: HTML

طبق معمول (برای همه دموهای مبتنی بر بوم) ما یک روش بسیار ساده داریم نشانه گذاری HTML(با یک شی در داخل، بوم):

اشیاء سه بعدی Wireframe در HTML5 از دکمه های بالا/پایین برای کنترل شفافیت شی استفاده کنید

بازیابی مقداردهی اولیه شی، ببینید:

//var obj = new cube(); //var obj = new sphere(6); var obj = کره جدید (16);

یعنی اگر نیاز به نمایش یک مکعب داریم، باید خط اول را از حالت کامنت بردارید، اگر می خواهید یک کره با 6 وجه نمایش داده شود، باید گزینه دوم را انتخاب کنید.

مرحله 2. JS

سه فایل جاوا اسکریپت (main.js، meshes.js و transform.js) وجود دارد که ما دو مورد از آنها را منتشر می کنیم، سومی (transform.js) فقط شامل توابع محاسبه مربوط به چرخش، مقیاس بندی و اشیاء پروژه است. پس بیایید به اولین کد جاوا اسکریپت نگاه کنیم:

js/meshes.js // دریافت یک تابع رنگ تصادفی getRandomColor() ( var letters = "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; فاصله var = -700; var vMouseSens = 0.05; var iHalfX، iHalfY؛ // تابع اولیه‌سازی () sceneInit ( // آماده‌سازی بوم و بافت شی = document.getElementById("صحنه")؛ ctx = canvas.getContext("2d")؛ iHalfX = canvas.width / 2؛ iHalfY = بوم. ارتفاع / 2؛ // مقیاس اولیه و مقیاس ترجمهObj(, obj)؛ translateObj([-obj.center, -obj.center, -obj.center],obj؛ translateObj(, obj)؛ // اتصال به رویداد سند کنترل کننده. onkeydown = handleKeydown؛ canvas.onmousemove = handleMousemove؛ // حلقه اصلی setInterval(drawScene, 25); ) // کنترل کننده رویداد OnKeyDown تابع handleKeydown(e) (kCode = ((e.which) || (e.Co ))؛ سوئیچ (kCode) ( مورد 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1): vAlpha؛ شکستن؛ // کلید پایین) ) // OnMouseMove تابع کنترل کننده رویداد handleMousemove(e) (var x = e .pageX - canvas.offsetLeft؛ var y = e.pageY - canvas.offsetTop؛ اگر ((x > 0) && (x< canvas.width) && (y >0) && (y< 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]] >حداکثر) max = obj.distance[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i]، faceColor:obj.colors[i]، فاصله:max); ) 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 را با فشار دادن کلیدهای Up/Down تغییر دهیم.