在本教程中，我们将使用FabricJS来设置Circle的控制角的颜色。当对象处于活动状态时，cornerColor属性允许我们操纵控制角的颜色。
语法
new fabric.Circle({ cornerColor: String }: Object)参数
options（可选） - 此参数是一个对象，提供了对圆形进行其他自定义的选项。使用此参数，可以更改与cornerColor属性相关的对象的颜色、光标、描边宽度和许多其他属性。
选项键
cornerColor - 此属性接受一个字符串，允许我们为选定对象的控制角分配一种颜色。
示例1
将cornerColor作为键，并使用颜色名称作为值传递
让我们通过使用cornerColor属性来改变颜色的示例。在这种情况下，我们将值“black”分配给键，使控制角显示为黑色。
<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "black"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例2
将RGBA值分配给cornerColor属性
我们可以将RGBA值分配给键的字符串值，而不仅仅是传递一个简单的颜色名称。RGBA代表红、绿、蓝和透明度（alpha）。让我们看一个示例，了解如何实现这一点−
<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "rgb(255,20,147)"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html> 
