Javascript 如何在 HTML5 画布上绘制一个模糊的圆圈？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5475755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a blurry circle on HTML5 canvas?
提问by pimvdb
I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it.
我可以在 HTML5 画布上绘制一个简单的圆圈，但我想在它周围添加一些模糊效果。
What I found was this websitewhich explains the shadowBlurproperty which can come in handy here.
我发现的是这个网站，它解释了shadowBlur可以在这里派上用场的财产。
However, I cannot manage to make the circle itself blurry. What the shadowBlurproperty basically does is painting some blur effect after the regular circle has been drawn. What I've tried so far I've put on jsFiddle.
但是，我无法使圆圈本身变得模糊。该shadowBlur属性的主要作用是在绘制规则圆后绘制一些模糊效果。到目前为止我尝试过的我已经穿上了 jsFiddle。
As can be seen, it's a solid filled circle with some blur effect around it - the two parts do not blend into each other at all. What I actually would like to achieve is that the circle itself is fully blurred like this:
可以看出，它是一个实心圆，周围有一些模糊效果——这两个部分根本不融合在一起。我真正想要实现的是圆圈本身完全模糊，如下所示：
Is there any way to draw a blurred circle like this, i.e. that the circle itself also has a blur effect?
有没有什么办法可以像这样画一个模糊的圆，即圆本身也有模糊效果？
回答by Simon Sarris
I'd strongly suggest against blur algorithms unless you are blurring some already-existing drawing that is complex.
我强烈建议不要使用模糊算法，除非您正在模糊一些已经存在的复杂绘图。
For your case, just draw a rect with a radial gradient.
对于您的情况，只需绘制一个具有径向渐变的矩形。
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);
Example:
例子：
回答by Ricardo Ferreira
You probably can obtain the bitmap pixel array and apply some blurring algorithm on top of it. For example: http://www.jhlabs.com/ip/blurring.html
您可能可以获得位图像素数组并在其上应用一些模糊算法。例如：http: //www.jhlabs.com/ip/blurring.html
回答by seveibar
You may find the context.filterproperty useful
您可能会发现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>Note as of April 2017, IE, Opera and Safari don't support this
请注意，截至 2017 年 4 月，IE、Opera 和 Safari 不支持此功能
回答by starbeamrainbowlabs
You can draw a blurred circle with the following function:
您可以使用以下函数绘制一个模糊的圆圈：
function drawblurrycircle(context, x, y, radius, blur)
{
context.shadowBlur = blur;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillStyle="#FF0000";
context.shadowColor="#FF0000"; //set the shadow colour to that of the fill
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2,true);
context.fill();
context.stroke();
}
回答by sebastian.derossi
If you are still interested in seeing this effect done with EaselJS, this might help JSFiddle EaselJS blur
如果您仍然对使用 EaselJS 完成此效果感兴趣，这可能有助于JSFiddle EaselJS 模糊
var stage = new createjs.Stage("test");
var s = new createjs.Shape();
var g = s.graphics;
g.f("#FF0000").dc(0, 0, 75);
s.x = 100;
s.y = 100;
s.filters = [new createjs.BoxBlurFilter(5, 5, 3)];
stage.addChild(s);
s.cache(-100, -100, 200, 200);
s.alpha = 0.5;
stage.update();
