html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Interactive Circle with Paper.js</title>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
<form>
<input type="range" min="0" max="85" name="radius" id="r" style="width: 150px; height: 50px;" required="true">
</form>
<div id="radius"></div>
<div id="area"></div>
<div id="cf"></div>
<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
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
paper.install(window);
window.onload = function () {
paper.setup("canvas");
with (paper) {
r.onchange = function (){
var num = document.getElementById("r");
var r = num.value;
project.activeLayer.removeChildren();
var path = new Path.Circle(view.center, r);
path.strokeWidth = 1;
path.strokeColor = "black";
var radius = document.getElementById("radius");
var a = document.getElementById("area");
var area = Math.PI*r*r;
var cf = document.getElementById("cf");
var c = Math.PI*2*r;
radius.innerHTML = "Radius is: " + r.toString() + " pixels.";
a.innerHTML = "Area is: " + area.toString() + " pixels.";
cf.innerHTML = "Circumference is: " + c.toString() + " pixels.";
}
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run