0. 설정
Paper.js 공식홈페이지의 Download로 가셔서 최신버전의 Paper.js 를 다운로드 받아주세요.
이 글을쓰는 현재기준으로 최신 릴리즈 버전은 0.12.0 입니다.
Paper라는 폴더를 만들고, 폴더안에 압축을 풀면 위와같이 됩니다.
이제 안에 myCode 라는 폴더를 만들어주고,
dist 폴더안의 paper-full.js 파일을 옮겨주세요.
위와같은 디렉토리 구조가 됩니다.
1. 테스트
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -100 ]);
path.lineTo(start + [ 100, -100 ] + [ 100, 100]);
path.lineTo(start + [ 100, -100 ] + [ 100, 100] + [ -200, 0 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
index.html 이라는 파일을 myCode라는 폴더안에 만들어주고 다음의 소스코드를 작성 해 주세요.
그 다음에 해당 파일을 더블클릭을 실행해 보면 삼각형이 그려져 있을 거에요. 다음과 같이요.
'컴퓨터공학 > 컴퓨터 애니메이션' 카테고리의 다른 글
| 2. PaperScript와 Javascript (0) | 2019.03.09 |
|---|---|
| 0. Introduction (1) | 2019.03.07 |