자바스크립트 완벽 가이드

the De󼴩nitive Guide

637

15.15 요약 및 추천 문서

// CSS

를

사용해

빠르게

,

일시적으로

확대합니다

.

this.canvas.style.transform

=

`translate(${

-

cdx*2}px, ${

-

cdy*2}px) scale(2)`;

//

새로운

중앙

지점의

복소수

좌표를

설정하고

2

배

확대합니다

.

this.setState(s

=

> {

s.cx +

=

cdx * s.perPixel;

s.cy +

=

cdy * s.perPixel;

s.perPixel /

=

2;

});

}

};

//

사용자가

제스처를

시작하면

pointermove, pointerup

이벤트

핸들러를

등록합니다

.

this.canvas.addEventListener("pointermove", pointerMoveHandler);

this.canvas.addEventListener("pointerup", pointerUpHandler);

}

}

//

마지막으로

캔버스

설정

코드입니다

.

필요한

것은

이

자바스크립트

파일에

모두

담겨

있으므로

// HTML

파일에는

<script>

하나만

포함하면

됩니다

.

let canvas

=

document.createElement("canvas"); //

캔버스

요소를

생성합니다

.

document.body.append(canvas); ...