<!doctype html>
<html>
<head>
<style>
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 circle1= new Path.Circle({center:view.center,radius:50,strokeColor:"blue"});
//circle1.curves[0].selected=true;
for (var i=0;i<circle1.curves.length;i++){
var parts=circle1.curves[i];
console.log(parts);
var path1= new Path();
path1.add(parts.segment1);
path1.add(parts.segment2);
path1.strokeColor=Color.random();
path1.strokeWidth=14;
var part=parts.getPart(.5,1);
console.log(part);
var path2=new Path();
path2.add(part.segment1);
path2.add(part.segment2);
path2.strokeColor=Color.random();
path2.strokeWidth=20;
}
var svg1=document.getElementById("svg1");
svg1.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js sine,cosine function: mouse Event (0) | 2024.03.12 |
|---|---|
| svg paper.js sine curve : event onMouseDown (0) | 2024.03.09 |
| svg paper.js getOffsetsWithTangent(): (0) | 2024.03.06 |
| svg paper.js path1.divide(path2): (0) | 2024.03.03 |
| svg boolean operation : divide! (0) | 2024.02.29 |
