QML带径向渐变色的圆形

Qt’s Canvas 实现了 HTML5 Canvas API

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.centerIn: parent
        anchors.margins: 20
        width: 400
        height: 400

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

                var centreX = width / 2;
                var centreY = height / 2;
                var radius=width/2;
                
                // 画径向渐变色
                var gradient=ctx.createRadialGradient(centreX,centreY,0,centreX,centreY,radius);
                gradient.addColorStop(0, 'white');
                gradient.addColorStop(1, 'green');
                ctx.fillStyle=gradient;
                ctx.arc(centreX, centreY, width / 4, 0, Math.PI * 2, false);
                ctx.fill();
            }
        }
    }
}