在（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(); 
       } 
      } 
     } 
    } 
}