JS 고급 복습

1. 구조 함수

만약 하나의 함수가 new 키워드에 맞추어 대상을 만들면, 이 함수를 구조 함수라고 할 수 있다.
구조 함수에는 잠재적인 규칙이 있는데, 바로 함수 이름의 자모가 대문자라는 것이다.

2. 실례

구두 설명에서 구조 함수를 통해 만들어진 대상을 실례라고 한다.

3. 상속

상속은 한 대상이 다른 대상을 사용할 수 있는 속성과 방법을 가리킨다.

4、prototype

함수에 기본적으로 포함된 속성입니다.

함수 new를 통해 나온 실례는 이 속성이 가리키는 원형 대상을 계승한다.

5、proto

대상에 기본적으로 포함된 속성입니다.

은 이 대상이 계승한 원형 대상을 나타낸다.

6, 상속 방식 1 - 기본 원형 상속

//  Fn
function Fn() {}
//  Fn value 
Fn.prototype.value = 100;
//  Fn obj 
var obj = new Fn();
//  Fn.prototype， value 
console.log(obj.value);

7. 계승방식 2 - 복사 구조 함수의 원형

//  Fn
function Fn() {}
//  Fn 
Fn.prototype = {
     value: 100
}
//  Fn obj 
var obj = new Fn();
//  Fn ， value 
console.log(obj.value);

8, 상속 방식 3 - 원형 혼입

//  
function extend(o1, o2) {
    for ( var key in o2 ) {
        o1[key] = o2[key];
    }  
}
//  Fn
function Fn() {}
//  Fn value ，
//  Fn.prototype value 。
extend(Fn.prototype, {
    value: 100
});
//  Fn obj 
var fn = new Fn();
//  Fn.prototype， value 
console.log(obj.value);

9, 계승 방식 4 - Object.create

var o = { value: 100 }
//  o 
var newObj = Object.create(o);

10, 상속 방식 5 - 구조 함수 대여(속성 상속)

//  
function Animal(name, age) {
    this.name = name;
    this.age = age;
}
//  
function Cat(name, age) {  
    //  Animal Cat 
    Animal.call(this, name, age);
}
//  boSi
var boSi = new Dog(' ', 2);
//  boSi name、age 
console.log(boSi);

새로운 내용 - 캔버스

첫날

1. 시작

canvas는 그림 효과를 보여주는 라벨로img과 유사하며 줄 안의 블록 요소

이다.

같은 페이지에 여러 개의 canvas 탭을 가질 수 있음

캔버스 기본 300*150, 캔버스 요소의 속성을 빌려야 합니다

그림을 그리는 단계:

먼저 만년필을 지정한 위치로 이동ctx.moveTo(x축 이동 좌표, y축 이동 좌표)

선을 그리기 시작합니다.lineTo(x축 이동 좌표, y축 이동 좌표)

선폭 설정ctx.lineWidth = 6; ==그리기 전에 선가중치 = =

색상 설정ctx.strokeStyle = 'blue';

스케치 경로ctx.stroke()

2. 기본 설정

현재 경로를 기준으로 구성

context.fill();

경로 지우기

context.beginPath();

닫힌 경로

현재 경로의 끝점에서 시작점까지 경로를 연결

닫힌 경로가 있으면 마지막 선을 그리지 않아도 된다

context.closePath();

캔버스 지우기

context.clearRect(x, y, w, h);

직사각형 경로 그리기

context.rect(x, y, w, h);

사각형 그리기

경로가 생성되지 않음

context.strokeRect(x, y, w, h);

채우기 사각형 그리기

경로가 생성되지 않음

context.fillRect(x, y, w, h);

선 실크 스타일 설정

context.setLineDash([5, 3...]);

선 실크 스타일 가져오기

context.getLineDash();

3. Context 속성

스플라인

context.strokeStyle = 색상 값,

충전 색상

context.fillStyle = 색상 값,

선가중치

context.lineWidth = 10;

모자

기본값은 butt입니다.

context.lineCap = 'butt' || 'round' || 'square';

선 교차점

기본값은 miter입니다.

context.lineJoin = 'miter' || 'round' || 'bevel';

점선 오프셋

context.lineDashOffset = 5;

4. 비 제로 서라운드 원칙

는 어떤 구역이 경로 안에 속하는지 판단하는 데 쓰인다(계산 결과가 0이 아니면 경로 안에 속한다).

경로가 둘러싸인 구역에서 아무거나 찾아서 밖으로 방사선을 발사하여 그 주변을 둘러싼 모든 것과 교차시킨 다음에 계수기를 켜서 0계수

에서

만약에 이 방사선이 시계 반대 방향으로 둘러싸이면 +1, 시계 반대 방향으로 둘러싸이면 -1,

최종 값이 0이 아니면 이 구역은 경로 안에 있습니다.

비고: 기수변의 구역은 반드시 경로 안에 있다.

5. 채우기와 그리기 순서 문제

가장자리를 그릴 때 원 도형의 일부분(선폭의 절반)을 차지한다.

따라서 일상적인 개발에서 선폭이 요구에 부합되도록

먼저 채우고 가장자리를 그리는 것이 좋습니다. 채울 때 와이어의 절반을 덮어쓰지 않도록 합니다.

6. canvas가 선을 그리는 메커니즘

선가중치의 절반을 왼쪽에서 오른쪽으로 오프셋한 다음 그리기

선가중치가 홀수이면 가장자리 색상 값이 절반으로 줄어듭니다

.