-
Notifications
You must be signed in to change notification settings - Fork 1
/
path02.html
45 lines (39 loc) · 1.17 KB
/
path02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<!--
This example is like path01 except we draw a rectangle and select it.
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- Load Paper.js libray -->
<script type="text/javascript" src="paper.js"></script>
<!-- Start Paperscript -->
<script type="text/paperscript" canvas="myCanvas">
// Create a new instance of Path
var path = new Path();
// Set line color
path.strokeColor= 'black';
// Add the points of the rectangle
path.add(new Point(30, 75));
path.add(new Point(30, 25));
path.add(new Point(80, 25));
path.add( new Point( 80, 75 ) );
// Draw a line from begginning to end
path.closed= true;
// Select the path, so we can see its handles:
path.fullySelected= true
// Create a copy of the path and move it 100pt to the right:
var copy= path.clone();
copy.fullySelected= true;
copy.position.x+= 100;
// Smooth the segments of the copy:
// The copy will appear rounded
copy.smooth();
</script>
</head>
<body>
<!--Set the canvas name-->
<canvas id="myCanvas" resize=""></canvas>
</body>
</html>