如何在HTML5画布上绘制模糊圆圈？
[英]How to draw a blurry circle on HTML5 canvas?
问题描述
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 website which explains the shadowBlur property which can come in handy here. 我发现这个网站解释了shadowBlur属性，它可以在这里派上用场。
However, I cannot manage to make the circle itself blurry. 但是，我无法让圆圈变得模糊。 What the shadowBlur property basically does is painting some blur effect after the regular circle has been drawn. shadowBlur属性基本上做的是在绘制常规圆后绘制一些模糊效果。 What I've tried so far I've put on jsFiddle . 到目前为止，我已经尝试过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, ie that the circle itself also has a blur effect? 有没有办法画出这样的模糊圆圈，即圆圈本身也有模糊效果？
5 个解决方案
解决方案1
51 已采纳 2011-03-29 17:36:45
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: 例：
解决方案2
3 2011-03-29 16:48:35
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
解决方案3
2 2017-04-27 01:25:07
You may find the context.filter property 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不支持此功能
解决方案4
1 2012-07-04 16:45:35
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();
}
解决方案5
0 2013-04-26 03:11:39
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();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.