마지막 업데이트: 28.04.2016

CSS는 요소 위치 지정 기능을 제공합니다. 즉, 페이지의 특정 위치에 요소를 배치할 수 있습니다.

CSS에서 위치 지정을 제어하는 ​​주요 속성은 position 속성입니다. 이 속성은 다음 값 중 하나를 사용할 수 있습니다.

static : 표준 요소 위치 지정, 기본값

절대 : 위치 속성이 정적이 아닌 경우 요소는 컨테이너 요소의 경계를 기준으로 배치됩니다.

상대 : 요소가 기본 위치를 기준으로 배치됩니다. 일반적으로 상대 위치 지정의 주요 목적은 요소를 이동하는 것이 아니라 중첩된 요소의 절대 위치 지정을 위한 새 앵커 포인트를 설정하는 것입니다.

고정 : 요소가 브라우저 창을 기준으로 배치됩니다. 이를 통해 스크롤할 때 위치가 변경되지 않는 고정 요소를 만들 수 있습니다.

float 속성과 static(즉, 기본 유형) 이외의 위치 지정 유형을 요소에 동시에 적용하면 안 됩니다.

절대 위치 지정

브라우저의 보기 영역에는 위쪽, 아래쪽, 오른쪽 및 왼쪽 가장자리가 있습니다. 이 네 개의 가장자리 각각에는 왼쪽, 오른쪽, 위쪽, 아래쪽이라는 해당 CSS 속성이 있습니다. 이러한 속성의 값은 픽셀, em 또는 백분율로 지정됩니다. 네 변 모두에 값을 설정할 필요는 없습니다. 일반적으로 위쪽 가장자리 위쪽의 들여쓰기와 왼쪽 가장자리의 들여쓰기라는 두 가지 값만 설정됩니다.

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 솔리드 #ccc; ) .inner( 위치: 절대; 왼쪽: 80px; 위쪽: 40px; 너비 : 50px; 높이: 50px; 배경색: rgba(128, 0, 0, 0.5); )

상대 위치 지정

상대 위치 지정도 상대 값을 사용하여 지정됩니다. 요소가 이동되는 특정 위치를 지정하려면 동일한 위쪽, 왼쪽, 오른쪽, 아래쪽 속성이 사용됩니다.

HTML5의 위치 지정 .outer( 위치: 상대; 왼쪽: 80px; 위쪽: 40px; 너비: 300px; 높이: 100px; 테두리: 1px 솔리드 #ccc; ) .inner( 위치: 절대; 왼쪽: 80px; 위쪽: 40px; 너비 : 50px; 높이: 50px; 배경색: rgba(128, 0, 0, 0.5); )

Z-색인 속성

기본적으로 두 요소의 테두리가 동일한 경우 html 마크업에서 마지막으로 정의된 요소가 다른 요소 위에 표시됩니다. 그러나 z-index 속성을 사용하면 요소가 오버레이될 때 요소의 순서를 변경할 수 있습니다. 속성은 숫자를 값으로 사용합니다. Z-인덱스 값이 더 큰 요소는 Z-인덱스 값이 더 작은 요소 위에 표시됩니다.

예를 들어:

HTML5 본문에서 위치 지정( 여백:0; 패딩:0; ) .content( 위치: 상대; 위쪽: 15px; 왼쪽: 20px; 너비: 250px; 높이: 180px; 배경색: #eee; 테두리: 1px 솔리드 #ccc ; ) .redBlock( 위치: 절대; 위쪽: 20px; 왼쪽:50px; 너비: 80px; 높이: 80px; 배경색: 빨간색; ) .blueBlock( 위치: 절대; 위쪽: 80px; 왼쪽: 80px; 너비: 80px ; 높이: 80px; 배경색: 파란색; )

이제 redBlock 블록 스타일에 새 규칙을 추가해 보겠습니다.

RedBlock( z-색인: 100; 위치: 절대; 위쪽: 20px; 왼쪽:50px; 너비: 80px; 높이: 80px; 배경색: 빨간색; )

여기서 z-index는 100입니다. 그러나 숫자 100일 필요는 없습니다. 두 번째 블록에는 정의되지 않은 z-index가 있고 실제로는 0이므로 redBlock의 경우 z-index 속성을 다음보다 큰 값으로 설정할 수 있습니다. 영.

이제 첫 번째 블록은 두 번째 블록과 겹치고 처음과 마찬가지로 그 반대의 경우는 발생하지 않습니다.

HTML 태그는 HTML 문서 내에 개체를 포함하는 데 사용됩니다. 웹페이지에 멀티미디어를 삽입하려면 이 태그를 사용하세요.

이벤트 핸들러 콘텐츠 속성

이벤트 핸들러 콘텐츠 속성 당신을 가능하게 HTML 내에서 스크립트를 호출합니다. 특정 "이벤트"가 발생하면 스크립트가 호출됩니다. 각 이벤트 핸들러 콘텐츠 속성은 서로 다른 이벤트를 처리합니다.

다음은 표준 HTML 5 이벤트 핸들러 콘텐츠 속성입니다.

• 중단하다
• 취소
• 흐리게 하다
• 온캔플레이
• 온캔플레이쓰루
• 변경시
• 클릭하면
• 상황에 맞는 메뉴
• ondblclick
• 드래그
• 온드래젠드
• 온드라겐터
• ondragexit
• 온드라글리브
• 온드래그오버
• 드래그스타트 시작
• 온드롭
• 지속시간변경
• 비워진
• 끝났다
• 오류 발생 시
• 집중하다
• onformchange
• 입력 입력
• 입력
• 유효하지 않은 경우
• 온키다운
• 키를 누르는 중
• 온키업
• 길 위에
• 로드된 데이터
• 로드된메타데이터
• onloadstart
• 마우스다운
• onmousemove
• 마우스아웃
• 마우스 오버 시
• 온마우스업
• 마우스휠로
• 일시중지
• 온플레이
• 연주 중
• 진행 중
• 환율변동
• 준비상태변경
• 스크롤하다
• 찾는
• onseeking
• 선택 시
• 온쇼
• 설치됨
• 제출시
• 정지 중
• 정시 업데이트
• 볼륨 변경
• 대기 중

이러한 속성에 대한 자세한 설명은 다음을 참조하세요.

ActiveX 구성요소 등록에 대해 몇 마디 더 말씀드리겠습니다. 일반적으로 BASIC은 생성 시 모든 ActiveX 구성 요소를 독립적으로 등록합니다. 등록은 ActiveX 구성 요소에 특별한 고유 식별자 CLSID를 할당하고 이를 레지스트리에 입력하는 것으로 구성됩니다. Windows 데이터베이스구성 요소의 속성과 위치를 특성화하는 여러 항목의 등록입니다. 우리는 이미 COM 및 DCOM 섹션에서 프로그램 등록에 대해 조금 이야기했습니다. 개발된 ActiveX 컴포넌트의 전 세계 배포 및 보급에 관해 지역 네트워크또는 인터넷인 경우 이는 별도의 주제이며 아래에서 논의됩니다.

쌀. 1.11. 브라우저에서 사전 구축된 ActiveX 컨트롤 사용

웹 페이지에 ActiveX 컨트롤 배치
ActiveX 컨트롤은 W3 컨소시엄의 작업 표준 중 하나에서 제안된 태그를 사용하여 HTML 문서에 연결됩니다. Netscape Navigator에서 이 태그의 목적은 외부 요소를 HTML에 통합하는 것입니다. 전체 태그 구문은 다음과 같습니다.

나열된 속성 중 일부는 잘 알려진 태그의 속성과 유사합니다. , 따라서 여기서는 고려하지 않겠습니다.

다음은 태그별 속성에 대한 설명입니다.
CIASSID=URL
이 속성은 호출되는 컨트롤 요소의 클래스 식별자를 지정합니다. 각 OCX 모듈과 각 ActiveX 컨트롤에는 고유한 클래스 식별자가 있어야 합니다. 일반적으로 CLSID로 축약되며 상당히 긴 16진수 문자열입니다(예: "017C99A0-8637-llCF-A3A9-00A0C9034 920").

그런데 이 속성의 구문에 "URL"이 있는 이유는 무엇입니까? 사실 태그는 ActiveX 컨트롤뿐만 아니라 "클래스 식별자"가 아닌 다른 방식으로 인식되는 개체를 포함하여 다른 프로그램 개체를 연결하는 데 사용될 수 있습니다.
브라우저가 하나의 구문만 처리하도록 하기 위해 CLSID는 URL 규칙에 따라 설정됩니다. 왼쪽에는 "clsid"라는 단어가 포함되고 오른쪽에는 실제 클래스 식별자가 포함됩니다.
예: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

코드베이스=URL
이 속성은 URL(이번에는 "http:" 또는 "ftp:" 접두어가 붙은 실제 URL)을 지정합니다. 어떤 이유로 서버 중 하나를 사용할 수 없는 경우 이 속성에 여러 URL을 나열할 수 있습니다.
동일한 속성을 사용하면 ActiveX 컨트롤에 필요한 버전 번호를 지정할 수 있습니다.
예를 들어 CODEBASE="http://activex.microsoft.com/controls/ieexplorer/iestock.ocx# Version=4.72,0.1171"이라고 쓰면
그런 다음 얻으려는 시도 이 모듈인터넷의 ActiveX는 사용자의 컴퓨터에 없을 때뿐만 아니라 컨트롤 요소가 설치된 경우에도 시도되지만 더 많은 이전 번호 CODEBASE 속성에 지정된 것보다 버전이 좋습니다(이 예에서는 4.72.0.1171보다 이전 버전이 필요하지 않습니다).

CODETURE=MIME 유형
TYPE=MIME 유형
이러한 두 가지 선택적 속성을 사용하면 CLASSID(CODETYPE 속성) 및 DATA(TYPE 속성) 속성에서 참조하는 파일의 유형(MIME 표준 측면에서)을 지정할 수 있습니다. ActiveX 컨트롤의 경우 CODETYPE 속성이 있는 경우 "application/x-oleobject"로 설정해야 합니다.

데이터=URL
이 속성은 이 컨트롤이 작동하는 데 필요할 수 있는 데이터 파일의 위치를 ​​지정합니다. 일부 ActiveX 컨트롤의 경우 이 속성이 필요합니다. 또한 DATA 속성을 사용하면 컨트롤 요소가 포함된 파일을 인코딩된 형식으로 HTML 파일에 직접 포함할 수 있습니다.

선언하다
일반적으로 이 문은 비어 있습니다. 구현되지 않은 경우 객체를 선언하는 데 사용할 수 있지만 다른 객체의 매개변수일 뿐입니다. 동시에 누군가가 요구할 경우를 대비하여 전체 객체 속성 세트가 브라우저의 메모리에 기록됩니다.

ID=id
식별자가 있는 다른 개체와의 상호 작용을 구성하는 데 필요합니다. URL 주소 지정 체계에서도 사용할 수 있습니다. 즉, URL에서 "#" 문자 뒤에 나타날 수 있습니다.
동일한 CLASSID 값으로 원하는 만큼 태그를 생성할 수 있지만, 해당 ID 값은 서로 달라야 합니다.

이름=id
HTML 양식을 준비할 때 사용할 수 있는 선택적 속성(이를 위해 태그는 태그 쌍 안에 있어야 합니다 ... ). 전송된 데이터에는 브라우저가 객체로부터 받은 정보가 포함됩니다.

모양
이 빈 속성을 사용하면 브라우저 공간의 개체가 차지하는 창 내에서 추가 하위 영역을 선택하고 이를 추가 URL 링크(일종의 핫스팟)로 표시할 수 있습니다. 이러한 지역의 좌표와 해당 링크의 URL은 해당 지역에 해당하는 AND 사이에 위치해야 하는 특별한 추가 속성이 있는 태그를 사용하여 지정됩니다.

이번 시간에는 태그에 대해 알아 보겠습니다. 주요 목적은 브라우저가 인식할 수 없는 HTML 페이지에 일부 개체를 삽입하는 것입니다. 예를 들어 플래시 게임, 이미지, 오디오, 비디오, Java 애플릿, ActiveX 요소, PDF가 될 수 있습니다.

HTML 태그 구문

... [] ...

속성 섹션에는 매우 중요한 매개변수객체의 작동을 위해(아래 예를 통해 그 의미를 살펴보겠습니다). 또한 필수 항목은 type 과 data 두 가지뿐입니다. 닫는 개체 태그와 여는 개체 태그 사이에서 를 통해 연결된 개체에 대한 매개변수를 설정할 수 있습니다(물론 필요한 경우).

태그 속성 1. 정렬

정렬 - 다른 페이지 요소를 기준으로 개체를 정렬합니다.

예를 들어

VALUE는 다음 값을 사용할 수 있습니다.

• absmiddle - 현재 줄의 중간에 정렬
• 기준선, 중간 - 현재 줄의 기준선에 대한 정렬
• 하단(기본값) - 개체의 하단 테두리를 주변 텍스트와 정렬합니다.
• left - 왼쪽의 객체 위치
• right - 오른쪽의 객체 위치
• top - 현재 줄의 가장 높은 요소에 정렬

2.클래식

Classid - 로드할 프로그램, 플러그인 또는 애플릿을 브라우저에 알려줍니다. 이 프로그램은 개체에 대해 추가 작업을 수행합니다.

예를 들어

URL 대신 절대 주소나 상대 주소를 작성할 수 있습니다.

3.데이터

데이터는 객체의 주소를 지정하기 때문에 가장 중요한 인수입니다.

예를 들어

객체 주소는 코드베이스 지정 여부에 따라 지정됩니다. 코드베이스가 지정되지 않은 경우 객체 주소는 우리가 위치한 디렉터리 부분을 기준으로 지정됩니다. 개체의 전체 주소를 지정하는 것이 좋습니다.

4. 높이와 너비

높이 및 너비 - 개체의 높이와 너비를 각각 설정합니다. 픽셀과 백분율로 모두 지정할 수 있습니다. 백분율로 설정하면 허용되는 영역을 기준으로 값이 계산됩니다.

예를 들어

5. 유형

유형 - 데이터 속성에 지정된 데이터의 MIME 유형을 정의합니다. 브라우저가 필요한 리소스를 준비하는 데 필요합니다. 대부분의 경우 해당 값은 정확히 "application/x-shockwave-flash"입니다.

브라우저가 개체를 지원하지 않는 경우(Adobe Flash Player가 설치되지 않은 경우 자주 발생함) 태그 내부에 개체를 로드할 수 없음을 사용자에게 알리는 텍스트를 지정할 수 있습니다.

예를 들어

죄송합니다. 개체를 표시할 수 없습니다. 참고 1

IE 브라우저는 데이터 값을 올바르게 이해하지 못할 수 있으므로 param 태그에 파일 주소를 다시 지정해야 합니다.

예: 객체를 사용하는 시계

개체를 이용하면 멀티미디어 개체와 요소를 쉽게 표시할 수 있습니다. 가장 간단하고 분명한 예는 시계입니다.

데모는 HTML5의 2D 그래픽과 실제 3D(WebGL 사용) 사이의 연결을 보여줍니다. 이 문서의 목적은 다각형 메쉬를 사용하여 3D 개체를 그리는 방법을 보여주는 것입니다. 다각형 메쉬는 3D에서 다면체 개체의 모양을 정의하는 꼭지점, 모서리 및 면의 모음입니다. 컴퓨터 그래픽그리고 솔리드 모델링.

간단한 3D 개체

정면은 삼각형, 사각형 또는 기타 간단한 다각형으로 구성됩니다. 이를 시연하기 위해 우리는 정육면체와 다면체 구(면 수가 다양함)와 같은 간단한 3D 개체를 준비했습니다.

3D 개체 그리기 1단계: HTML

평소와 마찬가지로(모든 캔버스 기반 데모의 경우) 매우 간단한 HTML 마크업(내부에 하나의 개체 포함, 캔버스):

HTML5의 와이어프레임 3D 개체는 위로/아래로 버튼을 사용하여 개체 투명도를 제어합니다.

객체 초기화 검색은 다음을 참조하세요.

//var obj = 새로운 큐브(); //var obj = newsphere(6); var obj = 새로운 구(16);

이는 큐브를 표시해야 하는 경우 첫 번째 줄의 주석 처리를 제거해야 하고, 6개의 면이 있는 구를 표시하려면 두 번째 옵션을 선택해야 함을 의미합니다.

2단계. JS

3개의 JavaScript 파일(main.js, meshes.js 및 변환.js)이 있으며 그 중 2개를 게시하고 있으며 세 번째 파일(transform.js)에는 회전, 크기 조정 및 프로젝트 개체와 관련된 계산 기능만 포함되어 있습니다. 그럼 첫 번째 JavaScript 코드를 살펴보겠습니다.

js/meshes.js // 무작위 색상 함수 가져오기 getRandomColor() ( var letter = "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); }

맨 처음부터 우리는 물체의 모든 포인트와 외관을 준비해야 합니다. 두 가지 함수가 있습니다: 큐브(간단한 큐브 개체에 대한 초기 배열 생성) 및 구(구 생성용). 다면체 구의 모든 점과 면을 계산하는 것은 훨씬 더 어렵습니다. 이러한 점과 표면이 모두 확보되면 다른 매개변수(예: 거리, 절대 중심, 3개 축)를 계산해야 합니다.

// 내부 변수 var canvas, ctx; var vAlpha = 0.5; var vShiftX = vShiftY = 0; var 거리 = -700; var vMouseSens = 0.05; var iHalfX, iHalfY; // 초기화 함수 sceneInit() ( // 캔버스 및 객체 컨텍스트 준비 canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas. height / 2; // 초기 배율 및 이동 scaleObj(, obj);translateObj([-obj.center, -obj.center, -obj.center],obj);translateObj(,obj); //이벤트에 연결 handler document.onkeydown = handlerKeydown; canvas.onmousemove = handlerMousemove; // 메인 루프 setInterval(drawScene, 25); ) // 이벤트 핸들러 OnKeyDown function handlerKeydown(e) ( kCode = ((e.which) || (e.keyCode )); switch (kCode) ( 사례 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // 아래쪽 키 ) ) // OnMouseMove 이벤트 핸들러 함수 handlerMousemove(e) ( var x = e .pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; if ((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]] >최대) 최대 = obj.distances[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], 거리:max); ) aFaceTriangles.sort(sortByDistance); // 예측된 포인트로 배열을 준비합니다. var aPrjPoints = new Array(); for (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 함수)을 렌더링합니다. Up/Down 키를 눌러 globalAlpha 매개변수를 변경할 수 있다는 것을 잊지 마십시오.