-
Notifications
You must be signed in to change notification settings - Fork 0
/
circles.html
28 lines (28 loc) · 1.01 KB
/
circles.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="circles.css" />
<!-- 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 + [ 500, -50 ]);
var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'purple';
var circle2 = new Path.Circle(new Point(350,200), 100);
circle2.fillColor = 'blue';
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>