mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-06-27 05:20:26 -04:00
Move examples into subfolders.
This commit is contained in:
Jonathan Puckey
parent
7e285abe7a
commit
cac4bea955
14 changed files with 206 additions and 206 deletions
47
examples/Scripts/arcTo.html
Normal file
47
examples/Scripts/arcTo.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Doc(canvas);
|
||||
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
for(var i = 0; i < 30; i++) {
|
||||
var vector = new Point(10 + 20 * i, 0).rotate(i);
|
||||
var l = vector.getLength();
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
for(var j = 0; j < 17; j++) {
|
||||
vector = vector.rotate(45 / 2);
|
||||
if(j == 0) {
|
||||
path.add(point.add(vector));
|
||||
} else {
|
||||
path.arcTo(point.add(vector), true);
|
||||
}
|
||||
}
|
||||
doc.children.push(path);
|
||||
}
|
||||
doc.children.reverse();
|
||||
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
35
examples/Scripts/circle.html
Normal file
35
examples/Scripts/circle.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Doc(canvas);
|
||||
var center = doc.size.divide(2);
|
||||
for(var i = 0; i < 70; i++) {
|
||||
var path = new Path.Circle(center, i * 5);
|
||||
path.strokeColor = 'black';
|
||||
doc.children.push(path);
|
||||
}
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
46
examples/Scripts/letter.html
Normal file
46
examples/Scripts/letter.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Doc(canvas);
|
||||
|
||||
var letterPath = new Path(
|
||||
new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
|
||||
new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
|
||||
new Segment(new Point(145.87060546875, 245.9306640625), new Point(0, 18.947265625), new Point(0, -17.27587890625)),
|
||||
new Segment(new Point(110.4833984375, 208.87158203125), new Point(25.35595703125, 9.4736328125), new Point(-30.65087890625, -11.14599609375)),
|
||||
new Segment(new Point(60.88525390625, 155.37255859375), new Point(0, 26.19189453125), new Point(0, -29.25732421875)),
|
||||
new Segment(new Point(121.62890625, 104.380859375), new Point(-36.501953125, 0), new Point(18.947265625, 0)),
|
||||
new Segment(new Point(162.86767578125, 113.576171875), new Point(-8.08056640625, -4.73681640625)),
|
||||
new Segment(new Point(156.18017578125, 133.35986328125), null, new Point(-5.8515625, -3.62255859375)),
|
||||
new Segment(new Point(120.79296875, 124.443359375), new Point(16.9970703125, 0), new Point(-25.63525390625, 0)),
|
||||
new Segment(new Point(85.4052734375, 152.5859375), new Point(0, -12.8173828125), new Point(0, 17.55419921875)),
|
||||
new Segment(new Point(122.7431640625, 188.80908203125), new Point(-25.91357421875, -10.03076171875), new Point(31.76513671875, 12.26025390625)),
|
||||
new Segment(new Point(170.39111328125, 243.97998046875), new Point(0, -27.58544921875), new Point(0, 28.97900390625)),
|
||||
new Segment(new Point(104.91015625, 298.31494140625), new Point(44.30419921875, 0), new Point(-18.111328125, 0)),
|
||||
new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
|
||||
);
|
||||
letterPath.fillColor = 'black';
|
||||
doc.children.push(letterPath);
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
42
examples/Scripts/lines.html
Normal file
42
examples/Scripts/lines.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Doc(canvas);
|
||||
setInterval(draw, 20);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
count++;
|
||||
doc.children = [];
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
var vector = new Point(100, 0);
|
||||
for(var i = 0; i < 180; i++) {
|
||||
var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
|
||||
path.strokeColor = i % 4 ? 'black' : 'red';
|
||||
doc.children.push(path);
|
||||
}
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
33
examples/Scripts/rectangle.html
Normal file
33
examples/Scripts/rectangle.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Doc(canvas);
|
||||
var path = new Path.Rectangle([50, 50], [100, 100]);
|
||||
path.strokeColor = 'black';
|
||||
console.log(path);
|
||||
doc.children.push(path);
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
39
examples/Scripts/roundRectangle.html
Normal file
39
examples/Scripts/roundRectangle.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Doc(canvas);
|
||||
setInterval(draw, 30);
|
||||
}
|
||||
function draw() {
|
||||
count++;
|
||||
doc.children = [];
|
||||
var rect = new Rectangle([150, 150], [300, 300]);
|
||||
var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
|
||||
var path = new Path.RoundRectangle(rect, size);
|
||||
path.fillColor = 'black';
|
||||
doc.children.push(path);
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
45
examples/Scripts/star.html
Normal file
45
examples/Scripts/star.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Doc(canvas);
|
||||
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
for(var i = 0; i < 30; i++) {
|
||||
var vector = new Point(1 + 10 * i, 0).rotate(i);
|
||||
var l = vector.getLength();
|
||||
var path = new Path();
|
||||
// path.strokeColor = '#000000';
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
for(var j = 0; j < 32; j++) {
|
||||
vector = vector.rotate(45 / 4);
|
||||
var newPoint = point.add(vector).add(vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1)));
|
||||
path.add(newPoint);
|
||||
}
|
||||
path.smooth();
|
||||
doc.children.push(path);
|
||||
}
|
||||
doc.children.reverse();
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
34
examples/Scripts/strokeJoin.html
Normal file
34
examples/Scripts/strokeJoin.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Doc(canvas);
|
||||
var path = new Path([100, 150], [150, 200], [200, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'bevel';
|
||||
doc.children.push(path);
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
38
examples/Scripts/temp.html
Normal file
38
examples/Scripts/temp.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../src/Bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../src/Item.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Point.js"></script>
|
||||
<script type="text/javascript" src="../../src/Rectangle.js"></script>
|
||||
<script type="text/javascript" src="../../src/Size.js"></script>
|
||||
<script type="text/javascript" src="../../src/Segment.js"></script>
|
||||
<script type="text/javascript" src="../../src/PathItem.js"></script>
|
||||
<script type="text/javascript" src="../../src/Path.js"></script>
|
||||
<script type="text/javascript" src="../../src/Doc.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Doc(canvas);
|
||||
var rect = new Rectangle([50, 50], [200, 100])
|
||||
var path = new Path.RoundRectangle(rect, 200);
|
||||
path.strokeColor = 'black';
|
||||
console.log(path);
|
||||
doc.children.push(path);
|
||||
|
||||
// var path = new Path.Rectangle(rect);
|
||||
// path.strokeColor = 'black';
|
||||
// doc.children.push(path);
|
||||
doc.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=1024 height=768></canvas>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue