Javascript 如何创建跟随鼠标的圆形轨迹？

我试图建立，但它不是一条线，我希望它是圆。这样我可以添加不同的填充。到目前为止，我能够让它在鼠标上移动这个代码，但只为第一圈。我怎样才能让他们排成一行

// The amount of points in the path:
var points = 30;

// The distance between the points:
var length = 10;

var path = new paper.Path({
  strokeColor: "white",
  strokeWidth: 50,
  strokeCap: "round"
});

var start = view.center / [10, 1];

// Circle
var circlePath = new Path.Circle({
  center: [80, 50],
  fillColor: "transparent",
  radius: 50
});

var thirdLayer = new Group();

for (var i = 0; i < points; i++) path.add(start + new Point(i * length, 0));

console.log(path);
// // for (var i = 0; i < points; i++) path.add(end + new Point(i * length, 0));

// // path.addSegments([[657.55, 455], [657.55, 500.5]]);

// path.closed = true;

function onMouseMove(event) {
  path.firstSegment.point = event.point;

  for (var i = 0; i < points - 1; i++) {
    var segment = path.segments[i];
    var nextSegment = segment.next;
    var vector = segment.point - nextSegment.point;
    vector.length = length;
    nextSegment.point = segment.point - vector;
  }
  // rect.subtract(nextSegment.point);
  path.smooth({ type: "continuous" });
  var rect = new paper.Path.Rectangle({
    point: [0, 0],
    size: [view.size.width],
    fillColor: "#E50069",
    strokeWidth: 1
  });
  // path.offset(10);
  var drilled = rect.subtract(path);
  secondLayer.removeChildren();
  secondLayer.addChild(drilled);
  rect.remove();

  secondLayer.addChild();
}

function onMouseDown(event) {
  console.log(event);
  path.fullySelected = true;
  path.strokeColor = "#e08285";
}

function onMouseUp(event) {
  path.fullySelected = false;
  path.strokeColor = "#fff";
  path.opacity = 1;
}

// function onFrame(event) {
//   rect.unite(path);
// }

//路径中的点数：
var点=30；
//点之间的距离：
变量长度=10；
var path=新纸张路径({
strokeColor：“白色”，
冲程宽度：50，
冲程盖：“圆形”
});
var start=view.center/[10,1]；
//圈
var circlePath=新路径。圆({
中间：[80,50]，
fillColor:“透明”，
半径：50
});
var thirdLayer=新组（）；
对于（var i=0；i

---

任何关于前进道路的见解都将不胜感激

根据您的参考，下面是一个示例，演示可能的解决方案

var points = 25;
var length = 35;
var path = new Path();

var start = view.center / [10, 1];
for (var i = 0; i < points; i++) {
    path.add(start + new Point(i * length, 0));
}

// Create a circle for each segment of the path.
var circles = [];
for (var i = 0; i < path.segments.length; i++) {
    var circle = new Path.Circle({
        center: path.segments[i].point,
        radius: 10,
        strokeColor: 'red'
    });
    circles.push(circle);
}

function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
        var segment = path.segments[i];
        var nextSegment = segment.next;
        var vector = segment.point - nextSegment.point;
        vector.length = length;
        nextSegment.point = segment.point - vector;
    }
    // Each time the path is updated, update circles position.
    updateCirclesPosition();
}

function updateCirclesPosition() {
    for (var i = 0; i < path.segments.length; i++) {
        circles[i].position = path.segments[i].point;
    }
}

var点=25；
变量长度=35；
var path=新路径（）；
var start=view.center/[10,1]；
对于（变量i=0；i

编辑 根据您在下面的评论，这里演示了如何使用相同的逻辑来产生“显示图像”效果。
这些技巧依赖于使用混合模式来合成层，而不必使用布尔运算（我最初发布了它）

//首先绘制一幅图像作为背景。
var背景=新光栅({
资料来源:'http://assets.paperjs.org/images/marilyn.jpg',
onLoad:function（）{
//让它充满整个屏幕。
this.fitBounds（view.bounds，true）；
}
});
//绘制一个矩形以隐藏背景。
var maskBase=新路径矩形({
矩形：view.bounds，
填充颜色：“白色”
});
//准备一个组来存储将显示背景的圆圈。
var循环=新组({
blendMode:“目标输出”
});
//将前两个元素组合在一个组中，以使其显示为
//需要。
变量掩码=新组({
儿童：[面具，圆圈]，
blendMode:“源已结束”
});
//然后准备好路径。
var点=25；
变量长度=35；
var path=新路径（）；
var start=view.center/[10,1]；
对于（变量i=0；i

Wow。谢谢你的回答。有没有办法用布尔运算把它们统一起来？是的，我想你可以，但你为什么要这么做？你想产生什么样的效果（也许有更好的方法）？我想创造一种效果，让一条蛇尾随（就像你所拥有的），这样你就可以看到下面的图像。有点像蛇穿过一层，然后看到它后面的东西。

// First draw an image as background.
var background = new Raster({
    source: 'http://assets.paperjs.org/images/marilyn.jpg',
    onLoad: function() {
        // Make it fill all the screen.
        this.fitBounds(view.bounds, true);
    }
});

// Draw a rectangle to hide the background.
var maskBase = new Path.Rectangle({
    rectangle: view.bounds,
    fillColor: 'white'
});

// Prepare a group to store the circles that will make the background appear.
var circles = new Group({
    blendMode: 'destination-out'
});

// Assemble both previous element in a group in order to make it display as we
// need.
var mask = new Group({
    children: [maskBase, circles],
    blendMode: 'source-over'
});

// Then prepare the path.
var points = 25;
var length = 35;
var path = new Path();
var start = view.center / [10, 1];
for (var i = 0; i < points; i++) {
    path.add(start + new Point(i * length, 0));
}

// Create a circle for each segment of the path.
for (var i = 0; i < path.segments.length; i++) {
    var circle = new Path.Circle({
        center: path.segments[i].point,
        radius: 10,
        fillColor: 'red'
    });
    circles.addChild(circle);
}

// Update the path when the mouse moves.
function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
        var segment = path.segments[i];
        var nextSegment = segment.next;
        var vector = segment.point - nextSegment.point;
        vector.length = length;
        nextSegment.point = segment.point - vector;
    }
    // Each time the path is updated, update circles position.
    updateCirclesPosition();
}

function updateCirclesPosition() {
    for (var i = 0; i < path.segments.length; i++) {
        circles.children[i].position = path.segments[i].point;
    }
}