Я могу нарисовать Полукруг с Фабри c. js. Но это не полностью обводить полукруг. См. Ссылку ниже, http://jsfiddle.net/udea1t4c/1/
var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
radius: 60,
left: 110,
top: 110,
angle: 0,
startAngle: toRadians(200),
endAngle: toRadians(290),
stroke: '#000',
strokeWidth: 5,
fill: 'lightblue'
});
canvas.add(circle);
function toRadians(deg) {
return deg * Math.PI / 180
}
<script src="https://raw.githubusercontent.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>
Я хочу сделать полукруг с полным ходом, как показано ниже по ссылке http://jsfiddle.net/n2eL8j96/
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var cx = 250;
var cy =200;
// in case you like using degrees
function toRadians(deg) {
return deg * Math.PI / 180
}
// draw a sector from 0 to Math.PI/2 aka one quarter of the Pie, going clockwise, starting at 0
ctx.fillStyle = 'white'
//ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,80,0,toRadians(90));
ctx.lineTo(cx,cy);
ctx.stroke();
//ctx.closePath();
ctx.fill();
// maybe a tiny slice from 180 to 220
ctx.fillStyle = 'lightblue'
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,80,toRadians(180),toRadians(350));
ctx.lineTo(cx,cy);
ctx.closePath();
ctx.fill();
<canvas id="canvas1" width="500" height="500"></canvas>
Но, это реализовано нативным API canvas. Я хочу нарисовать это Фабри c Js. Я нахожу много пути, но я не могу найти его. Было бы здорово, если кто-нибудь может помочь.