Paper.jsで長方形、円、角丸、多角形を描いてみる

Pathを描画する

smooth()で正方形を円にする

smooth()を使うことで、ポイントとポイントを繋ぐ線が滑らかになります。
http://paperjs.org/tutorials/paths/working-with-path-items/

いろんな図形を描く

http://paperjs.org/tutorials/paths/creating-predefined-shapes/

円

    var circle = new Path.Circle(new Point(100,70),50);
    circle.strokeColor = "black";

正方形を描いて、smoothさせる方法もありますが、最初から円コンストラクタが定義されているのでそれを使ったほうが簡単です。

長方形

　　var rect = new Rectangle(new Point(200,50),new Point(300,100));
    
    var path = new Path.Rectangle(rect);
    path.fillColor = "#ccc";
    path.selected = true;

左上と右下の点を定義して、パスを引いて作成します。

角丸

　　var rect2 = new Rectangle(new Point(50,200),new Point(200,250));
    var cornerSize = new Size(20,20);
    var path2 = new Path.RoundRectangle(rect2,cornerSize);
    path2.fillColor = "#85EB6A";

Sizeで角丸の大きさを定義して、RoundedRectangleで角丸長方形を作成します。

多角形

　　var triangle = new Path.RegularPolygon(new Point(80,370),3,50);
    triangle.fillColor = "#FF9640";
    triangle.selected = true;
    
    var decahedron = new Path.RegularPolygon(new Point(200,370),10,50);
    decahedron.fillColor = "#FFB273";
    decahedron.selected = true;

中心座標、角の数、半径を定義すれば、三角形や10角形も描くことができます。