Oxirgi yangilanish: 28.04.2016

CSS elementni joylashtirish imkoniyatlarini taqdim etadi, ya'ni biz elementni sahifaning ma'lum bir joyiga joylashtirishimiz mumkin.

CSS-da joylashishni aniqlashni boshqaradigan asosiy xususiyat bu pozitsiya xususiyatidir. Bu xususiyat quyidagi qiymatlardan birini qabul qilishi mumkin:

statik: standart element joylashuvi, standart qiymat

mutlaq: element konteyner elementining chegaralariga nisbatan joylashadi, agar uning joylashuv xususiyati statik bo'lmasa

nisbiy : element standart holatiga nisbatan joylashtirilgan. Odatda, nisbiy joylashishni aniqlashning asosiy maqsadi elementni siljitish emas, balki uning ichiga joylashtirilgan elementlarning mutlaq joylashuvi uchun yangi langar nuqtasini o'rnatishdir.

sobit : element brauzer oynasiga nisbatan joylashtirilgan, bu sizga aylantirilganda o'rnini o'zgartirmaydigan sobit elementlarni yaratishga imkon beradi

Bir vaqtning o'zida elementga float xususiyatini va statikdan (ya'ni standart turdagi) boshqa joylashishni aniqlash turini qo'llamasligingiz kerak.

Mutlaq joylashishni aniqlash

Brauzerning ko'rish maydoni yuqori, pastki, o'ng va chap qirraga ega. Ushbu to'rtta qirralarning har biri tegishli CSS xususiyatiga ega: chap, o'ng, yuqori va pastki. Ushbu xususiyatlar uchun qiymatlar piksel, ems yoki foizlarda ko'rsatilgan. To'rt tomon uchun qiymatlarni belgilash shart emas. Qoidaga ko'ra, faqat ikkita qiymat o'rnatiladi - yuqori chetidan chekinish va chap chetidan chekinish.

HTML5 .headerdagi blok tartibi (pozitsiya: mutlaq; chap: 100px; tepa: 50px; kenglik: 430px; balandlik: 100px; fon rangi: rgba(128, 0, 0, 0.5); )

SALOM DUNYO

Bu erda div elementi mavjud mutlaq joylashishni aniqlash ko'rish maydoni chegarasining chap tomonida 100 piksel va pastdan 50 piksel bo'ladi.

Ushbu div elementidan keyin boshqa elementlarning mavjudligi unchalik muhim emas. Ushbu div bloki har qanday holatda brauzer ko'rish oynasi chegaralariga nisbatan joylashtiriladi.

Agar mutlaq joylashuvga ega element boshqa konteynerda joylashgan bo'lsa, u o'z navbatida static ga teng bo'lmagan joylashuv xususiyati qiymatiga ega bo'lsa, u holda element konteyner chegaralariga nisbatan joylashtiriladi:

HTML5 da joylashishni aniqlash .outer (pozitsiya: mutlaq; chap: 80px; tepa: 40px; kenglik: 430px; balandlik: 100px; chegara: 1px qattiq #ccc; ) .inner( pozitsiya: mutlaq; chap: 80px; tepa: 40px; kenglik : 50px; balandlik: 50px; fon rangi: rgba(128, 0, 0, 0.5); )

Nisbiy joylashishni aniqlash

Nisbiy joylashuv ham nisbiy qiymat yordamida belgilanadi. Element siljitiladigan aniq pozitsiyani belgilash uchun bir xil yuqori, chap, o'ng, pastki xususiyatlar qo'llaniladi:

HTML5 da joylashishni aniqlash .outer (pozitsiya: nisbiy; chap: 80px; tepa: 40px; kenglik: 300px; balandlik: 100px; chegara: 1px qattiq #ccc; ) .inner( pozitsiya: mutlaq; chap: 80px; tepa: 40px; kenglik : 50px; balandlik: 50px; fon rangi: rgba(128, 0, 0, 0.5); )

z-indeks xususiyati

Odatiy bo'lib, ikkita element bir xil chegaraga ega bo'lsa, html belgilashda oxirgi belgilangan element ikkinchisining tepasida ko'rsatiladi. Biroq, z-index xususiyati elementlarning ustiga qo'yilganda tartibini o'zgartirishga imkon beradi. Mulk o'z qiymati sifatida raqamni oladi. Kattaroq z-indeks qiymatiga ega elementlar kichikroq z-indeks qiymatiga ega elementlarning tepasida paydo bo'ladi.

Masalan:

HTML5 tanasida joylashish (margin:0; padding:0; ) .content(pozitsiya: nisbatan; tepa: 15px; chap: 20px; en: 250px; balandlik: 180px; fon rangi: #eee; chegara: 1px qattiq #ccc ; ) .redBlock(pozitsiya: mutlaq; tepa: 20px; chap:50px; kenglik: 80px; balandlik: 80px; fon rangi: qizil; ) .blueBlock( pozitsiya: mutlaq; tepa: 80px; chap: 80px; kenglik: 80px ; balandligi: 80px; fon rangi: koʻk; )

Endi redBlock blok uslubiga yangi qoida qo'shamiz:

RedBlock( z-index: 100; pozitsiya: mutlaq; tepa: 20px; chap: 50px; eni: 80px; balandlik: 80px; fon rangi: qizil; )

Bu yerda z-index 100. Lekin u 100 raqami boʻlishi shart emas. Ikkinchi blokda aniqlanmagan z indeksi bor va aslida nolga teng boʻlgani uchun, redBlock uchun biz z-index xususiyatini istalgan qiymatdan kattaroq qiymatga oʻrnatishimiz mumkin. nol.

Va endi birinchi blok ikkinchisiga to'g'ri keladi va boshida bo'lgani kabi aksincha emas.

HTML tegi ob'ektni HTML hujjatiga joylashtirish uchun ishlatiladi. Veb-sahifalaringizga multimedia joylashtirish uchun ushbu tegdan foydalaning.

Hodisa ishlov beruvchisi tarkibi atributlari

Hodisa ishlov beruvchisi tarkibi atributlari sizga imkon beradi HTML ichidagi skriptni chaqirish uchun. Skript ma'lum bir "hodisa" sodir bo'lganda chaqiriladi. Har bir voqea ishlov beruvchisi kontent atributi boshqa hodisa bilan shug'ullanadi.

Bu yerda standart HTML 5 hodisa ishlov beruvchisi kontent atributlari.

• onabort
• bekor qilish
• xiralashish
• oncanplay
• o'ynash orqali
• o'zgarish
• ustiga bosing
• kontekst menyusi
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• davomiylik o'zgarishi
• bo'shatilgan
• tugadi
• xato
• diqqat markazida
• onformchange
• onforminput
• kiritish
• yaroqsiz
• onkeydown
• ustiga bosing
• onkeyup
• yuklash
• yuklangan ma'lumotlar
• yuklangan metama'lumotlar
• yuklashni boshlash
• sichqonchani pastga
• sichqonchani harakatga keltiring
• mouseout
• sichqoncha ustida
• onmouseup
• sichqoncha g'ildiragi
• pauza
• o'yinda
• o'ynamoqda
• davom etmoqda
• tezligini o'zgartirish
• onreadstatechange
• aylantiring
• izlangan
• izlanish
• tanlash
• namoyish
• o'rnatilgan
• yuborish
• to'xtatib turish
• ontime update
• hajmini o'zgartirish
• kutmoqda

Ushbu atributlarning to'liq izohi uchun qarang.

ActiveX komponentlarini ro'yxatdan o'tkazish haqida yana bir necha so'z aytaylik. Odatda, BASIC barcha ActiveX komponentlarini yaratish vaqtida mustaqil ravishda ro'yxatdan o'tkazadi. Ro'yxatdan o'tish ActiveX komponentiga CLSID maxsus noyob identifikatorini belgilash va uni reestrga kiritishdan iborat. Windows ma'lumotlar bazasi Komponentning xususiyatlarini va uning joylashuvini tavsiflovchi bir nechta yozuvlar reestri. Biz allaqachon COM va DCOM bo'limlarida dasturlarni ro'yxatdan o'tkazish haqida bir oz gaplashdik. Ishlab chiqilgan ActiveX komponentlarini taqsimlash va tarqatish bo'yicha mahalliy tarmoq yoki Internet, keyin bu alohida mavzu va quyida muhokama qilinadi.

Guruch. 1.11. Brauzerda oldindan tuzilgan ActiveX boshqaruvidan foydalanish

Web-sahifalarda ActiveX boshqaruv elementlarini joylashtirish
ActiveX boshqaruv elementlari HTML hujjatlariga W3 konsorsiumining ish standartlaridan birida taklif qilingan teg yordamida ulanadi. Ushbu tegning maqsadi (Netscape Navigator da) HTML ga xorijiy elementlarni birlashtirishdir. Mana to'liq teg sintaksisi:

Ro'yxatdagi ba'zi atributlar taniqli tegning atributlariga o'xshaydi , shuning uchun biz ularni bu erda ko'rib chiqmaymiz.

Bu yerda tegga xos atributlarning tavsifi:
CIASSID=URL
Bu atribut chaqirilayotgan boshqaruv elementining sinf identifikatorini belgilaydi. Har bir OCX moduli va shuning uchun har bir ActiveX boshqaruvi o'zining noyob sinf identifikatoriga ega bo'lishi kerak. Odatda CLSID qisqartiriladi va o'n oltilik raqamlarning juda uzun qatoridir - masalan, "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Lekin nima uchun bu atributning sintaksisida "URL" mavjud? Gap shundaki, teg nafaqat ActiveX boshqaruvlarini, balki boshqa dastur ob'ektlarini, shu jumladan "sinf identifikatorlari" tomonidan emas, balki boshqa yo'l bilan tanilganlarni ulash uchun ishlatilishi mumkin.
Brauzer faqat bitta sintaksis bilan ishlashini ta'minlash uchun CLSID URL qoidalariga muvofiq o'rnatiladi: chap tomonda "clsid" so'zi, o'ng tomonda esa haqiqiy sinf identifikatori mavjud.
Misol: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Bu atribut URL manzilini belgilaydi (bu safar haqiqiy, "http:" yoki "ftp:" prefiksi bilan). Agar biron sababga ko'ra serverlardan biri mavjud bo'lmasa, ushbu atributda bir nechta URL manzillarini ro'yxatga olishingiz mumkin.
Xuddi shu atribut ActiveX boshqaruv elementlari uchun kerakli versiya raqamini belgilash imkonini beradi.
Masalan, agar siz CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171" deb yozsangiz
keyin olishga urinish ushbu modul Internetdan ActiveX faqat foydalanuvchining kompyuterida bo'lmaganda emas, balki boshqaruv elementi o'rnatilganda, lekin ko'proq narsaga ega bo'lganda ham harakat qiladi. eski raqam CODEBASE atributida ko'rsatilganidan ko'ra versiya (Bizning misolimizda 4.72.0.1171 dan eski bo'lmagan versiya talab qilinadi).

CODETURE=MIME-turi
TYPE=MIME-turi
Ushbu ikkita ixtiyoriy atribut CLASSID (CODETYPE atributi) va DATA (TYPE atributi) atributlari tomonidan havola qilingan fayllarning turlarini (MIME standarti nuqtai nazaridan) belgilash imkonini beradi. ActiveX boshqaruvlari uchun CODETYPE atributi, agar mavjud bo'lsa, "application/x-oleobject" ga o'rnatilishi kerak.

DATA=URL
Ushbu atribut ushbu boshqaruvning ishlashi uchun kerak bo'lishi mumkin bo'lgan ma'lumotlar faylining joylashuvini belgilaydi. Ba'zi ActiveX boshqaruvlari uchun bu atribut talab qilinadi. Bundan tashqari, DATA atributidan foydalanib, boshqaruv elementini o'z ichiga olgan faylni to'g'ridan-to'g'ri HTML fayliga kodlangan shaklda kiritishingiz mumkin.

E'lon qiling
Odatda bu bayonot bo'sh. U amalga oshirilmaganda ob'ektni e'lon qilish uchun ishlatilishi mumkin, lekin u faqat boshqa ob'ektning parametri hisoblanadi. Shu bilan birga, agar kimdir talab qilsa, ob'ekt atributlarining barcha to'plami brauzer xotirasiga yoziladi.

ID=id
Identifikatorga ega bo'lgan boshqa ob'ektlar bilan o'zaro aloqani tashkil qilish uchun kerak. U URL manzillash sxemasida ham qo'llanilishi mumkin (ya'ni URLda "#" belgisidan keyin paydo bo'lishi mumkin).
Siz bir xil CLASSID qiymati bilan xohlagancha ko'p teg yaratishingiz mumkin, ammo ularning ID qiymatlari boshqacha bo'lishi kerak.

NAME=id
HTML formasini tayyorlashda foydalanish mumkin bo'lgan ixtiyoriy atribut (buning uchun teg teg juftligi ichida bo'lishi kerak ... ). Yuborilgan ma'lumotlar brauzer tomonidan ob'ektdan olingan ma'lumotlarni o'z ichiga oladi.

SHAKLLAR
Ushbu bo'sh atribut brauzer maydonidagi ob'ekt egallagan oynada qo'shimcha pastki maydonlarni tanlash va ularni qo'shimcha URL havolalari (hot nuqtalar turi) sifatida belgilash imkonini beradi. Ushbu hududlarning koordinatalari va ular uchun havolalarning URL manzillari maxsus qo'shimcha atributlarga ega teglar yordamida belgilanadi, ular VA unga mos keladigan o'rtasida joylashgan bo'lishi kerak.

Ushbu darsda biz teg haqida bilib olamiz. Uning asosiy maqsadi brauzer taniy olmaydigan HTML sahifasiga ba'zi ob'ektlarni joylashtirishdir. Masalan, bu flesh-o'yin, tasvirlar, audio, video, java appletlari, activeX elementlari, PDF bo'lishi mumkin.

HTML teg sintaksisi

... [] ...

Atributlar bo'limida juda ko'p muhim parametrlar ob'ektning ishlashi uchun (biz ularning ma'nolarini quyida misollar bilan ko'rib chiqamiz). Bundan tashqari, faqat ikkita majburiy mavjud: turi va ma'lumotlar . Yopish va ochish ob'ekt teglari o'rtasida bog'langan ob'ekt uchun parametrlarni (agar, albatta, kerak bo'lsa) orqali o'rnatishingiz mumkin.

Teg atributlari 1. Align

Align - ob'ektni boshqa sahifa elementlariga nisbatan tekislash uchun javobgardir.

Masalan

VALUE quyidagi qiymatlarni qabul qilishi mumkin:

• absmiddle - joriy chiziqning o'rtasiga tekislang
• asosiy chiziq , o'rta - joriy chiziqning asosiy chizig'iga moslashish
• pastki (standart) - ob'ektning pastki chegarasini atrofdagi matn bilan tekislaydi
• chapda - ob'ektning chapdagi joylashuvi
• o'ng - o'ngdagi ob'ektning joylashuvi
• top - joriy chiziqning eng yuqori elementiga tekislang

2. Klassid

Classid - brauzerga qaysi dastur, plagin yoki applet yuklanishi kerakligini aytadi. Ushbu dastur keyinchalik ob'ekt bilan ishlaydi

Masalan

URL manzili oʻrniga mutlaq yoki nisbiy manzil yozishingiz mumkin.

3.Ma'lumotlar

Ma'lumotlar eng muhim argumentdir, chunki u ob'ekt manzilini belgilaydi.

Masalan

Ob'ekt manzili kod bazasini ko'rsatganimizga qarab belgilanadi. Agar kodlar bazasi ko'rsatilmagan bo'lsa, u holda ob'ekt manzili katalogning biz joylashgan qismiga nisbatan ko'rsatiladi. Ob'ektning to'liq manzilini ko'rsatishni tavsiya qilaman.

4. Balandlik va kenglik

Height and Width - mos ravishda ob'ektning balandligi va kengligini o'rnatish. Piksellarda ham, foizlarda ham ko'rsatilishi mumkin. Agar biz uni foiz sifatida belgilasak, qiymatlar ruxsat etilgan maydon asosida hisoblanadi.

Masalan

5. Turi

Type - ma'lumotlar atributida ko'rsatilgan ma'lumotlarning MIME turini belgilaydi. Brauzer kerakli resurslarni tayyorlash uchun kerak. Ko'pincha uning qiymati aynan "application/x-shockwave-flash" dir.

Agar brauzer ob'ektlarni qo'llab-quvvatlamasa (bu Adobe flash player o'rnatilmagan bo'lsa, ko'pincha sodir bo'ladi), u holda teg ichida foydalanuvchiga ob'ektni yuklash mumkin emasligi haqida xabar beradigan matnni belgilashingiz mumkin.

Masalan

Kechirasiz, ob'ektni ko'rsatib bo'lmaydi. Eslatma 1

IE brauzeri ma'lumotlar qiymatini to'g'ri tushunmasligi mumkin, shuning uchun parametr teglarida fayl manzilini yana ko'rsatishingiz kerak:

Misol: ob'ekt yordamida soat

Ob'ektdan foydalanib, siz multimedia ob'ektlari va elementlarini osongina ko'rsatishingiz mumkin. Eng oddiy va eng aniq misol - bu soat.

Namoyish HTML5-dagi 2D grafika va haqiqiy 3D (WebGL yordamida) oʻrtasidagi koʻprikni koʻrsatadi. Ushbu maqolaning maqsadi ko'pburchak to'r yordamida 3D ob'ektlarni qanday chizishni ko'rsatishdir. Ko'pburchak to'r - bu 3D formatida ko'pburchakli ob'ektlarning shaklini belgilaydigan uchlari, qirralari va yuzlari to'plami. kompyuter grafikasi va qattiq modellashtirish.

Oddiy 3D ob'ektlar

Fasad uchburchaklar, to'rtburchaklar yoki boshqa oddiy ko'pburchaklardan iborat. Buni ko'rsatish uchun biz oddiy 3D ob'ektlarni tayyorladik - kub va ko'p burchakli sharlar (o'zgaruvchan sonli yuzlar bilan).

3D obyektlarini chizish 1-bosqich: HTML

Odatdagidek (barcha tuvalga asoslangan demolar uchun) bizda juda oddiy HTML belgilash(ichida bitta ob'ekt bilan, tuval):

HTML5-dagi Wireframe 3D obyektlari obyekt shaffofligini boshqarish uchun yuqoriga/pastga tugmalaridan foydalanadi.

Ob'ektni ishga tushirishni olish, qarang:

//var obj = yangi kub(); //var obj = yangi shar(6); var obj = new shar(16);

Bu shuni anglatadiki, agar biz kubni ko'rsatishimiz kerak bo'lsa, birinchi qatorni izohdan olib tashlashingiz kerak, agar siz 6 ta yuzli sharni ko'rsatishni istasangiz, ikkinchi variantni tanlashingiz kerak.

2-qadam. JS

Uchta JavaScript fayli (main.js, meshes.js va transform.js) mavjud, biz ulardan ikkitasini nashr etmoqdamiz, uchinchisi (transform.js) faqat aylantirish, masshtablash va loyiha obyektlari bilan bogʻliq hisoblash funksiyalarini oʻz ichiga oladi. Shunday qilib, keling, birinchi JavaScript kodini ko'rib chiqaylik:

js/meshes.js // Tasodifiy rang funksiyasini oling 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); }

Eng boshida biz ob'ektlarimizning barcha nuqtalarini va jabhasini tayyorlashimiz kerak. 2 ta funksiya mavjud: kub (oddiy kub ob'ekti uchun boshlang'ich massivlarni hosil qiladi) va sharlar (sfera yaratish uchun). Ko'pburchakli shar uchun barcha nuqta va yuzlarni hisoblash ancha qiyinroq. Bu barcha nuqtalar va sirtlarga ega bo'lganimizdan so'ng, biz boshqa parametrlarni (masalan, masofa, mutlaq markaz va uchta eksa) hisoblashimiz kerak.

// Ichki o'zgaruvchilar var canvas, ctx; var vAlpha = 0,5; var vShiftX = vShiftY = 0; var masofa = -700; var vMouseSens = 0.05; var iHalfX, iHalfY; // Initsializatsiya funksiyasi sceneInit() ( // Tuval va obyekt kontekstini tayyorlash kanvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. balandlik / 2; // Boshlang'ich masshtab va tarjima scaleObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Voqeaga ulanish ishlov beruvchi hujjati. onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Asosiy tsikl setInterval(drawScene, 25); ) // Hodisalarni ishlov beruvchi OnKeyDown funksiyasi handleKeydown(e) ( kCode = ((e.which) || (e.keyCode) )); switch (kCode) ( 38-holat: vAlpha = (vAlpha = 0,2) ? (vAlpha - 0,1) : vAlpha; break; // Pastga tugmasi ) ) // OnMouseMove hodisani qayta ishlash funksiyasi handleMousemove(e) ( var x = e .pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; agar ((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) max = obj.masofalar[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], masofa:maks); ) aFaceTriangles.sort(sortByDistance); // Bashorat qilingan nuqtalar bilan massiv tayyorlang var aPrjPoints = new Array(); uchun (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; } }

Sahifani yuklagandan so'ng, biz asosiy ishga tushirishni amalga oshiramiz (sceneInit funktsiyasi). Biz tuval va ob'ekt kontekstini yaratamiz, ya'ni biz boshlang'ich masshtabni bajaramiz va eng boshida yaratgan ob'ektlarimizni (kub yoki to'p) tarjima qilamiz. Keyin biz OnKeyDown va OnMouseMove-ga voqea ishlov beruvchilarini biriktiramiz va asosiy sahnamizni ko'rsatish uchun taymerni o'rnatamiz (DrawScene funksiyasi). Yuqori/past tugmalarini bosish orqali globalAlpha parametrlarini o'zgartirishimiz mumkinligini unutmang.