html5-canvas - paper.js でアネモネを作成しますか?

Question

私はキャンバスのすべてが初めてです。丸みを帯びたトップでラインを作成する方法がわかりません。私はこれまでのところこれを持っています：

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'
});

ストロークの一端だけを丸める方法はありませんが、必要に応じて、位置と直径がセグメントの位置と strokeWidth に一致する円を作成できます。

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