CSS 中的平滑同心径向渐变

Question

我正在尝试使用 js 在 canvas 上创建像这样的模糊甜甜圈形状。 我试过了

gradient.addColorStop(0, "rgba(0, 0, 0, .1)");
gradient.addColorStop(0.5, "rgba(128, 128, 128, .1)");
gradient.addColorStop(1, "rgba(0, 0, 0, .1)");

但我只得到

它在停止半径处有一个明确定义的圆。 我想要的是平滑的衰减。 像这样的东西..

这可能吗？

Answer 1

看起来您是在追求高斯模糊而不是渐变。
您可以使用ctx.filter属性创建这样的模糊并传入 CSS 过滤器值"blur(Npx)" 。
但是 Safari 仍然不支持这个属性，所以对于这个浏览器，我们需要使用阴影作为解决方法。

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); if (ctx.filter === "none") { ctx.filter = "blur(60px)"; } else { // Safari still doesn't support ctx.filter... ctx.shadowColor = "#34aaff"; ctx.shadowBlur = 120; // x2 ctx.shadowOffsetX = 800; ctx.translate(-800, 0); // we draw the actual shape outside of the visible context } ctx.arc(400, 400, 200, 0, Math.PI*2); ctx.lineWidth = 125; ctx.strokeStyle = "#34aaff"; ctx.stroke();

 <canvas width=800 height=800></canvas>

Answer 2

您可以尝试添加一个或多个色标来控制形状：

gradient.addColorStop(0, "White");
gradient.addColorStop(0.3, "rgba(128, 128, 256, .5)");
gradient.addColorStop(0.4, "rgba(128, 128, 256, .5)");
gradient.addColorStop(1, "White");