Как нарисовать полностью обводку вокруг Полукруга с Fabri c Js? - PullRequest
0 голосов
/ 19 апреля 2020

Я могу нарисовать Полукруг с Фабри 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. Я нахожу много пути, но я не могу найти его. Было бы здорово, если кто-нибудь может помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...