我们如何使用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();
但我的问题是强线是可见的。我需要平滑地绘制它没有边缘。怎么做?
答案 0 :(得分:5)
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();
}
}
}
}
}