在(QML/Javascript)画布中绘制模糊的圆
如何使用QML或Javascript在画布上绘制模糊的圆 我试过:在(QML/Javascript)画布中绘制模糊的圆,javascript,qt,canvas,html5-canvas,qml,Javascript,Qt,Canvas,Html5 Canvas,Qml,如何使用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.strokeStyl
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();
但我的问题是强线是显而易见的。我需要画得平滑,没有边缘。如何做到这一点?如果我想将wht复制为笔划而不是填充,请使用径向渐变。。
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();
}
}
}
}
}