语法new fabric.ellipse({ bordercolor: string }: object)
参数选项（可选）- 此参数是一个对象 为我们的椭圆提供额外的定制。使用此参数，可以更改与 bordercolor 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
options keysbordercolor - 此属性接受一个 string确定主动选择对象时边框的颜色。其默认值为 rgb(178,204,255)。
示例 1使用字符串值传递 bordercolor 键
让我们看一个如何为 bordercolor 属性赋值的示例。我们已将值“blue”分配给 bordercolor 键，这有助于在选择椭圆对象时创建蓝色边框。
<!doctype html><html> <head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>how to create an ellipse with a border color using fabricjs?</h2> <p>select the object to see the "blue" border color.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); // initiate an ellipse instance var ellipse = new fabric.ellipse({ left: 215, top: 100, rx: 90, ry: 50, fill: "red", bordercolor: "blue", }); // adding it to the canvas canvas.add(ellipse); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
示例 2将 rgba 值传递给 bordercolor 键
而不是将简单的颜色名称作为字符串传递，我们还可以使用 rgba 值，其分量指定红色、绿色、蓝色和 alpha 的数量，其中 alpha 表示不透明度。在此示例中，我们使用了 rgb(128,0,128)，它是紫色的 rgb 值。
<!doctype html><html> <head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>how to create an ellipse with a border color using fabricjs?</h2> <p>select the object to see the "purple" border color.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); // initiate an ellipse instance var ellipse = new fabric.ellipse({ left: 215, top: 100, rx: 90, ry: 50, fill: "red", bordercolor: "rgb(128,0,128)", }); // adding it to the canvas canvas.add(ellipse); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
以上就是如何使用 fabricjs 创建带有边框颜色的椭圆？的详细内容。