1 | <!DOCTYPE html>
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>Resize</title>
|
---|
6 | <link rel="stylesheet" href="../css/style.css">
|
---|
7 | <script type="text/javascript" src="../../dist/paper.js"></script>
|
---|
8 | <script type="text/paperscript" canvas="canvas">
|
---|
9 | var path = new Path.Circle({
|
---|
10 | center: [100, 100],
|
---|
11 | radius: 50,
|
---|
12 | fillColor: 'red'
|
---|
13 | });
|
---|
14 | var shape = path.toShape();
|
---|
15 | shape.position += [200, 0];
|
---|
16 | var path = shape.toPath();
|
---|
17 | path.position += [200, 0];
|
---|
18 |
|
---|
19 | var path = new Path.Ellipse({
|
---|
20 | center: [100, 200],
|
---|
21 | radius: [50, 25],
|
---|
22 | fillColor: 'blue',
|
---|
23 | strokeColor: 'black',
|
---|
24 | strokeWidth: 10
|
---|
25 | });
|
---|
26 | path.rotate(20);
|
---|
27 | var shape = path.toShape();
|
---|
28 | shape.position += [200, 0];
|
---|
29 | var path = shape.toPath();
|
---|
30 | path.position += [200, 0];
|
---|
31 |
|
---|
32 | var path = new Path.Rectangle({
|
---|
33 | center: [100, 300],
|
---|
34 | size: [100, 50],
|
---|
35 | fillColor: 'green',
|
---|
36 | strokeColor: 'black',
|
---|
37 | strokeWidth: 10
|
---|
38 | });
|
---|
39 | path.rotate(-20);
|
---|
40 | var shape = path.toShape();
|
---|
41 | shape.position += [200, 0];
|
---|
42 | var path = shape.toPath();
|
---|
43 | path.position += [200, 0];
|
---|
44 |
|
---|
45 | var path = new Path.Rectangle({
|
---|
46 | center: [100, 400],
|
---|
47 | size: [50, 100],
|
---|
48 | radius: [5, 10],
|
---|
49 | fillColor: 'orange',
|
---|
50 | strokeColor: 'black',
|
---|
51 | strokeWidth: 10
|
---|
52 | });
|
---|
53 | path.rotate(20);
|
---|
54 | var shape = path.toShape();
|
---|
55 | shape.position += [200, 0];
|
---|
56 | var path = shape.toPath();
|
---|
57 | path.position += [200, 0];
|
---|
58 | </script>
|
---|
59 | </head>
|
---|
60 | <body>
|
---|
61 | <canvas id="canvas" resize></canvas>
|
---|
62 | </body>
|
---|
63 | </html> |
---|