gpt4 book ai didi

javascript - 如何在 HTML5 canvas 上画一个模糊的圆圈?

转载 作者:IT王子 更新时间:2023-10-29 03:17:03 27 4
gpt4 key购买 nike

我可以在 HTML5 Canvas 上绘制一个简单的圆圈,但我想在它周围添加一些模糊。

我找到的是 this website这解释了可以在这里派上用场的 shadowBlur 属性。

但是,我无法使圆圈本身变得模糊。 shadowBlur 属性的主要作用是在绘制规则圆之后绘制一些模糊效果。到目前为止我试过的是on jsFiddle .

可以看出,它是一个实心圆圈,周围有一些模糊效果 - 两个部分根本没有相互融合。我实际上想要实现的是圆圈本身完全模糊,如下所示:

blurred circle

有没有办法画出这样一个模糊的圆圈,即圆圈本身也有模糊的效果?

最佳答案

我强烈建议不要使用模糊算法,除非您要模糊一些已经存在的复杂绘图。

对于您的情况,只需绘制一个具有径向渐变的矩形。

  var radgrad = ctx.createRadialGradient(60,60,0,60,60,60);
radgrad.addColorStop(0, 'rgba(255,0,0,1)');
radgrad.addColorStop(0.8, 'rgba(228,0,0,.9)');
radgrad.addColorStop(1, 'rgba(228,0,0,0)');

// draw shape
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);

例子:

http://jsfiddle.net/r8Kqy/48/

关于javascript - 如何在 HTML5 canvas 上画一个模糊的圆圈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5475755/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com