如何在HTML5画布上绘制模糊圆圈？
pim*_*vdb 32 javascript html5 geometry canvas blur
我可以在HTML5画布上绘制一个简单的圆圈,但我想在它周围添加一些模糊.
我发现这个网站解释了shadowBlur这个可以派上用场的房产.
但是,我无法让圆圈变得模糊.该shadowBlur属性基本上是在绘制常规圆后绘制一些模糊效果.到目前为止,我已经尝试过jsFiddle.
可以看出,它是一个实心的圆形,周围有一些模糊效果 - 这两个部分根本不会相互融合.我实际想要实现的是圆圈本身完全模糊如下:
有没有办法画出这样的模糊圆圈,即圆圈本身也有模糊效果？
Sim*_*ris 51
我强烈建议不要使用模糊算法,除非你模糊了一些复杂的现有绘图.
对于您的情况,只需绘制一个径向渐变的矩形.
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);
例:
- +1使用RGBA在模糊区域中获得适当的透明度.干得好. (3认同)
- 但请记住,这不是真正的(高斯)模糊!这种模糊是由具有直边的"圆锥"产生的,真实(高斯)模糊看起来会更柔和.您可以通过添加更多colorStop来近似它. (2认同)
您可能会发现context.filter属性很有用
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.filter = "blur(16px)";
context.fillStyle = "#f00";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.fill();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<canvas width=200 height=200 id='canvas'></canvas>
</body>
</html>请注意，截至 2017 年 4 月，IE、Opera 和 Safari 不支持此功能
- 截至 2020 年 7 月，Safari 仍不受支持 (2认同)