如何在 HTML5 画布上绘制一个模糊的圆圈? [英] How to draw a blurry circle on HTML5 canvas?

问题描述

我可以在 HTML5 画布上绘制一个简单的圆圈，但我想在它周围添加一些模糊效果.

我发现的是

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:

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

解决方案

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/

这篇关于如何在 HTML5 画布上绘制一个模糊的圆圈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！