러닝 자바스크립트: ES6로 제대로 입문하는 모던 자바스크립트 웹 개발

45

1

장

첫 번째 애플리케이션

첫 번째 행에서는

Paper

.

js

를 전역 스코프에 설치했습니다(스코프에 대해서는

7

장에서 배웁

니다 ). 두 번째 행에서는

Paper

.

js

를 캔버스에 연결하고

Paper

.

js

가 그림을 그릴 수 있도록 준

비합니다. 중앙의

TODO

는 실제로 그림을 그리는 코드가 들어갈 자리입니다. 마지막 행에서는

Paper

.

js

가 실제로 화면에 그림을 그리라는 명령입니다.

이제 템플릿이 준비됐으니 그림을 그려 봅시다. 먼저 캔버스 중앙에 녹색 원을 그리겠습니다.

TODO

주석을 다음 행으로 교체하십시오.

var

c

=

Shape

.

Circle

(

200

,

200

,

50

);

c

.

fillColor

= '

green

';

브라우저를 새로고침 하니 녹색 원이 나타났습니다. 사실 이 두 행에서는 아주 많은 일을 하지

만, 지금 알아야 할 것은 몇 가지뿐입니다. 첫 번째 행은 원

객체

를 만들고, 객체를 만들기 위해

매개변수

세 가지를 받습니다. 여기서 받은 매개변수는 원 중앙의

x

,

y

좌표와 원의 반지름입

니다. 캔버스의 너비와 높이가 각각

400

픽셀이었으므로 캔버스의 중심은 (

200

,

200

)입니다.

반지름

50

픽셀은 캔버스의 너비와 높이의

8

분의

1

입니다. 두 번째 행에서는 채울 색깔 (

fill

)을

정했습니다. 이 색깔은

Paper

.

js

에서

스트로크

stroke ...