Как установить цвет границы круга холста

Question

Я создал круг в QML, используя Canvas 2D. Полукруг имеет светло-зеленый цвет, а другой - голубой, но теперь я не знаю, как установить цвет границы для этого круга. Кто-нибудь знает, как установить цвет границы этого круга ??

     Canvas {
          anchors.fill: parent
          onPaint: {
              var ctx = getContext("2d");
              ctx.reset();

              var centreX =900;
              var centreY = 150;

              ctx.beginPath();
              ctx.fillStyle = "#16AA55"; //green
              ctx.moveTo(centreX, centreY);
              ctx.arc(centreX, centreY,100, Math.PI * 0.01, Math.PI * 1, false);
              ctx.lineTo(centreX, centreY);
              ctx.fill();

              ctx.beginPath();
              ctx.fillStyle = "#26A7CA";
              ctx.moveTo(centreX, centreY);
              ctx.arc(centreX, centreY, 100, Math.PI * 1, Math.PI * 2.01, false);
              ctx.lineTo(centreX, centreY);
              ctx.fill();
          }

Answer 1

Вам нужно свойство strokeStyle, чтобы сделать это. Прежде чем рисовать фигуру на холсте, установите любой цвет, который вы хотите. Подробнее об этом

Ниже приведен фрагмент, который рисует два круга с разными цветами границ.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF0000";
ctx.stroke();

ctx.beginPath();
ctx.arc(210, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "blue";
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Надеюсь, это поможет:)