반응형
[자바스크립트] paper.js 예제
1. index.html
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>My first application!</h1>
<p>Welcome to <i> Learning JavaScript, 3rd Edition</i> .</p>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-core.min.js"></script>
<canvas id="mainCanvas"></canvas>
</body>
</html>
2. main.css
/* 여기 스타일을 씁니다. */
#mainCanvas {
width: 400px;
height: 400px;
border: solid 1px black;
}
3. main.js
$(document).ready(function(){
'user strict';
paper.install(window); //paper.js를 전역스코프에 설치
paper.setup(document.getElementById('mainCanvas')); //mainCanvas라는 캔버스에 연결
//무엇을 그릴 것인가
var c = Shape.Circle(200,200,80); // 원(x,y,반지름)
c.fillColor = 'black'; //색깔
var text = new PointText(200,200);
text.justification = 'center';
text.fillColor='white';
text.fontSize=20;
text.content = 'hello world';
var tool = new Tool(); //사용자 입력을 처리하는 Tool 객체
tool.onMouseDown = function(event){ //사용자가 마우스를 클릭해야만 이벤트 발생
var c =Shape.Circle(event.point,20);
c.fillColor = 'blue';
}
paper.view.draw(); //실제로 화면에 그려라
//console.log('main.js loaded');
});
참고서적 : 러닝 자바스크립트
반응형
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 if ...else 문을 3항 연산자로 바꾸기 (0) | 2019.12.20 |
|---|---|
| [JavaScript] 자바스크립트 템플릿 문자열이란? (0) | 2019.12.20 |
| [JavaScript] 내 맘대로 주사위 게임 예제 (0) | 2019.12.04 |
| Front end (프론트엔드) 공부 로드맵 (0) | 2019.11.27 |
| javascript 예제 - 계산기 (0) | 2019.09.10 |