html - 如何将颜色设置为圆形 Canvas 的边框

Question

我使用 canvas 2D 在 QML 中创建了圆。半圈是浅绿色，另一半是天蓝色，但现在我不知道如何为这个圈设置边框颜色。任何人都知道如何为这个圆圈的边界设置颜色？？

     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 属性来执行此操作。在将形状绘制到 Canvas 上之前，将其设置为您想要的任何颜色。 More on this

下面是一个片段，它绘制了两个具有不同边框颜色的圆圈。

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>

希望这有帮助:)