时间戳

首页 > 解决方案 > 如何将颜色设置为圆形画布的边框

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

问题描述

我使用画布 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();
          }

标签： htmlcanvasqml

解决方案

您需要该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>

希望这可以帮助 ：）

推荐阅读