在（QML/Javascript）画布中绘制一个模糊的圆圈

Question

我们如何使用 QML 或 Javascript 在画布中绘制一个模糊的圆圈？

我试过了：

var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.shadowBlur = 20;
ctx.shadowColor = "#22ff0000";
ctx.shadowOffsetX = 10;
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.arc(canvas.centerWidth,
  canvas.centerHeight,
  canvas.radius, canvas.angleOffset,
  canvas.angleOffset + canvas.angle);
ctx.stroke();
ctx.restore();

但我的问题是强线是可见的。我需要平滑地绘制它而没有边缘。如何做到这一点？

Answer 1

import QtQuick 2.7
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    id:container
    width: 600
    height: 300
    visible: true

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#F0F0F0" }
            GradientStop { position: 0.5; color: "#FFFFFF" }
        }
        Row {
            anchors.fill: parent

            RadialGradient {
                width: 300
                height: 300
                gradient: Gradient {
                    GradientStop { position: 0.25; color: "#00000000" }
                    GradientStop { position: 0.3; color: "#80F5A9E1" }
                    GradientStop { position: 0.35; color: "#00000000" }
                }

            }

            Canvas {
                id: canvas
                width: 300
                height: 300
                onPaint: {
                    var context = getContext('2d');
                    context.rect(0, 0, canvas.width, canvas.height);
                    var grd = context.createRadialGradient(150, 150, 0, 150, 150, 300);
                    grd.addColorStop(0.25, '#00000000');
                    grd.addColorStop(0.30, '#80F5A9E1');
                    grd.addColorStop(0.35, '#00000000');
                    context.fillStyle = grd;
                    context.fill();
                }
            }
        }
    }
}