html5-canvas - 用 paper.js 创建海葵？

Question

我对所有东西画布都是 100% 的新手。我不确定如何创建圆顶线。到目前为止我有这个：

var path = new Path.Line({
    from: [50, 500],
    to: [50, 200],
    strokeColor: 'black',
    strokeWidth: 20
});

只创建一条基本线。但是有没有办法把它的顶部弄圆？

Answer 1

您可以通过更改 strokeCap 属性来舍入路径的两端：

var path = new Path.Line({
  from: [50, 500],
  to: [50, 200],
  strokeColor: 'black',
  strokeWidth: 20,
  strokeCap: 'round'
});

没有办法只对笔画的一端进行圆整，但如果需要，您可以创建一个位置和直径与段的位置和笔画宽度相匹配的圆：

var circle = new Path.Circle({
  center: new Point(50, 200),
  radius: 10,
  fillColor: 'black'
});