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