브러쉬 효과
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
tool.minDistance = 10;
tool.maxDistance = 45;
var path;
function onMouseDown(event) {
path = new Path();
path.fillColor = { // 색상 랜덤 설정
hue: Math.random() * 360, // 0 ~ 360 값
saturation: 1,
brightness: 1
};
path.add(event.point);
}
function onMouseDrag(event) {
var step = event.delta / 2; // 너비를 위한 값
step.angle += 90; // 90도 회전
var top = event.middlePoint + step; // 상단 좌표
var bottom = event.middlePoint - step; // 하단 좌표
path.add(top);
path.insert(0, bottom);
path.smooth(); // 부드럽게 가공
}
function onMouseUp(event) {
path.add(event.point);
path.closed = true;
path.smooth();
}
</script>
</head>
<body>
<canvas id="myCanvas" resize="true"></canvas>
</body>
</html>
예제 결과
'Programming > Paper.js' 카테고리의 다른 글
| Paper.js 회전 (0) | 2013.12.03 |
|---|---|
| Paper.js 투명도 및 블랜딩 효과 (0) | 2013.11.05 |
| Paper.js 색상 및 스타일 (0) | 2013.11.01 |
| Paper.js 도형 (0) | 2013.10.31 |
| Paper.js 폴리곤 (Polygon) (0) | 2013.10.30 |
