<!doctype html>
<html>
<head>
<style>
html,
body {
height: 100%;
}
canvas,svg {
width:800px;
height:800px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var r=1;
var rad=0;
var path_line= new Path.Line({from:[400,400],to:[714,400],strokeColor:"black"});
var path_circle= new Path.Circle({center:[400,400],radius:50,strokeColor:"blue"});
var path_circle2= new Path.Circle({center:[400,400],radius:50,strokeColor:"green"});
function onFrame(event){
var cnt=event.count;
if(cnt==628){view.onFrame=null;}
rad +=.01;
var x=400+r*(rad-Math.sin(rad))*50;
var y=400+r*(1-Math.cos(rad))*50;
var x2=400+r*(rad-Math.sin(rad))*50;
var y2=400-r*(1-Math.cos(rad))*50;
var path= new Path.Circle({center:[x,y],radius:3,strokeColor:"red"});
path.fillColor="red";
path_circle.position =[400+r*(rad)*50,450];
var path2= new Path.Circle({center:[x2,y2],radius:3,strokeColor:"red"});
path2.fillColor="red";
path_circle2.position =[400+r*(rad)*50,350];
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js quadrant : (0) | 2024.04.21 |
|---|---|
| svg paper.js astroid : area from Green's Theorem (1) | 2024.03.30 |
| svg paper.js epicycloid & hypocycloid : astroid and quatrefoiloid (0) | 2024.03.22 |
| svg paper.js epicycloid : circles (0) | 2024.03.21 |
| svg paper.js epicycloid: nephroid (0) | 2024.03.19 |
