How to draw a blurry circle on HTML5 canvas?

2019-01-08 13:21发布

站内问答 / JavaScript
1450 5 3

I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it.

What I found was this website which explains the shadowBlur property which can come in handy here.

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. What I've tried so far I've put on 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:

blurred circle

Is there any way to draw a blurred circle like this, i.e. that the circle itself also has a blur effect?

5条回答
萌系小妹纸
2楼-- · 2019-01-08 14:07

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();
}
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
3楼-- · 2019-01-08 14:13

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

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
4楼-- · 2019-01-08 14:17

You may find the context.filter property useful

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

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
5楼-- · 2019-01-08 14:22

If you are still interested in seeing this effect done with EaselJS, this might help JSFiddle EaselJS blur

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();
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
6楼-- · 2019-01-08 14:26

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:

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)