Как нарисовать размытый круг на холсте HTML5? - PullRequest
Новая
       89

Как нарисовать размытый круг на холсте HTML5?

31 голосов
/ 29 марта 2011

Я могу нарисовать простой круг на холсте HTML5, но я бы хотел добавить немного размытия вокруг него.

Я обнаружил этот сайт , который объясняет shadowBlur свойство, которое может пригодиться здесь.

Однако мне не удается сделать сам круг размытым.Свойство shadowBlur в основном создает эффект размытия после того, как нарисован обычный круг.То, что я пробовал до сих пор, я поместил на jsFiddle .

Как видно, это сплошной закрашенный круг с некоторым эффектом размытия вокруг него - две части не смешиваются вдруг друга на всех.Чего я на самом деле хотел бы добиться, так это того, чтобы сам круг был полностью размыт, как это:

blurred circle

Есть ли способ нарисовать размытый круг, как этот, то есть сам круг?также имеет эффект размытия?

Ответы [ 5 ]

51 голосов
/ 29 марта 2011

Я бы настоятельно рекомендовал не использовать алгоритмы размытия, если только вы не размываете уже существующий чертеж, который является сложным.

Для вашего случая просто нарисуйте прямоугольник с радиальным градиентом. 

  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);

Пример:

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

3 голосов
/ 29 марта 2011

Вы, вероятно, можете получить массив пикселей растрового изображения и применить некоторый алгоритм размытия поверх него. Например: http://www.jhlabs.com/ip/blurring.html

2 голосов
/ 27 апреля 2017

Вы можете найти свойство 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 года IE, Opera и Safari не поддерживают это

1 голос
/ 04 июля 2012

Вы можете нарисовать размытый круг с помощью следующей функции: 

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 голосов
/ 26 апреля 2013

Если вы все еще заинтересованы в том, чтобы этот эффект был сделан с EaselJS, это может помочь 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();
...