При загрузке страницы на канве рисуется фигура и ее можно всячески модифицировать. Надо сделать так, чтобы фигура появлялась при нажатии на кнопку. Рисую на canvas. Использую событие onclick:
<input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" > , но ничего не происходит
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/paper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/paperscript" canvas="canvas-1">
var values = {
paths: 1, // всего фигур
minPoints: 5, // минимум точек на фигуре
maxPoints: 5, // макс тосек на фигуре
minRadius: 40,
maxRadius: 50
};
var hitOptions = {
segments: true,
stroke: true, // чтобы можно было менять фигуру по точкам
fill: true, // сдвинуть фигуру с места
tolerance: 5 // насколько алгоритм может отойти от первонач-го пути
};
var radiusDelta = values.maxRadius - values.minRadius;
var pointsDelta = values.maxPoints - values.minPoints;
for (var i = 0; i < values.paths; i++) {
var radius = values.minRadius + Math.random() * radiusDelta;
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
var path = createBlob(view.size * 0.5, radius, points); // creates a blob on a one place
var lightness = 0.5;
var hue = 0.56 * 360; // задает цвет фигуры
path.style = {
fillColor: new HslColor(hue, 0.5, lightness), //design blob
strokeColor: path.hue
};
};
// creates a blob
function createBlob(center, maxRadius, points) {
var path = new Path(); // constructor
path.closed = true; // connects the first and last segments
for (var i = 0; i < points; i++) {
var delta = new Point({
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
angle: (360 / points) * i
});
path.add(center + delta);
}
path.smooth();
return path;
}
var segment, path;
var movePath = false;
function onMouseDown(event) {
segment = path = null;
var hitResult = project.hitTest(event.point, hitOptions);
if (event.modifiers.shift) {
if (hitResult.type == 'segment') {
hitResult.segment.remove();
};
return;
}
if (hitResult) {
path = hitResult.item;
if (hitResult.type == 'segment') {
segment = hitResult.segment;
} else if (hitResult.type == 'stroke') {
var location = hitResult.location;
segment = path.insert(location.index + 1, event.point);
path.smooth();
}
}
movePath = hitResult.type == 'fill';
if (movePath)
project.activeLayer.addChild(hitResult.item);
}
function onMouseMove(event) {
var hitResult = project.hitTest(event.point, hitOptions);
project.activeLayer.selected = false;
if (hitResult && hitResult.item)
hitResult.item.selected = true;
}
function onMouseDrag(event) {
if (segment) {
segment.point = event.point;
path.smooth();
}
if (movePath)
path.position += event.delta;
}</script>
</head>
<!-- Определяет имя класса, которое позволяет связать тег со стилевым оформлением-->
<body class="fullscreen">
<input type="button" value="Blob" onClick="createBlob(center, maxRadius, points)" >
<div class="canvas"><canvas resize="true" id="canvas-1" style="background:white"></canvas></div>
</body>
</html>