<!doctype html>
<html>
<head>
<style>
canvas,svg {border:1px solid red;width:100%;height:100%;position:absolute;}
svg path {stroke:inherit;fill:inherit;}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path.Star({
center: new Point(0, 0),
points: 5,
radius1: 5,
radius2: 13,
fillColor: 'white',
strokeColor: 'black'
});
// Create a symbol definition from the path:
var definition = new SymbolDefinition(path);
// Place 50 instances of the symbol:
for (var i = 0; i < 50; i++) {
// Place an instance of the symbol in the project:
var instance = new SymbolItem(definition);
// Move the instance to a random position within the view:
instance.position = Point.random() * view.size;
// Rotate the instance by a random amount between
// 0 and 360 degrees:
instance.rotate(Math.random() * 360);
// Scale the instance between 0.25 and 1:
instance.scale(1.25 + Math.random() * 1.75);
//
instance.strokeColor=Color.random();
instance.fillColor=Color.random();
}
//
var svg=document.querySelector('#svg1');
svg.appendChild(project.activeLayer.exportSVG({}));
console.log(svg);
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg viewBox: using viewBox matters. (0) | 2024.02.18 |
|---|---|
| svg paper.js : star (1) | 2024.02.08 |
| svg paper.js : tools (0) | 2024.02.04 |
| svg paper.js :MouseEvent, KeyEvent (0) | 2024.02.04 |
| svg paper.js : onMouseUp event (0) | 2024.02.03 |
