Comment dessiner un cercle flou sur le canevas HTML5 ?

Question

Comment dessiner un cercle flou sur le canevas HTML5 ?

Demandé el 29 de Mars, 2011: Quand la question a-t-elle été
8370 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis capable de dessiner un simple cercle sur le canevas HTML5, mais j'aimerais ajouter un peu de flou autour de celui-ci.

Ce que j'ai trouvé est ce site web qui explique le shadowBlur qui peut s'avérer utile ici.

Cependant, je n'arrive pas à rendre le cercle lui-même flou. Qu'est-ce que le shadowBlur permet essentiellement de peindre un effet de flou après que le cercle régulier ait été dessiné. Ce que j'ai essayé jusqu'à présent, c'est de mettre sur jsFiddle .

Comme on peut le voir, il s'agit d'un cercle plein rempli avec un effet de flou autour de lui - les deux parties ne se confondent pas du tout. Ce que j'aimerais obtenir, c'est que le cercle lui-même soit complètement flou comme ceci :

blurred circle

Existe-t-il un moyen de dessiner un cercle flou de cette manière, c'est-à-dire que le cercle lui-même ait également un effet de flou ?

Demandé el 29 de Mars, 2011 par pimvdb

Answer 1

5 Réponses

Answer 2

51voto

Simon Sarris Points 33799

Je déconseille fortement les algorithmes de flou, à moins que vous ne souhaitiez flouter un dessin déjà existant et complexe.

Dans votre cas, il suffit de dessiner un rectangle avec un gradient radial.

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

Exemple :

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

Répondu el 29 de Mars, 2011 par Simon Sarris (33799 Points )

Answer 3

5voto

seveibar Points 1147

Vous pouvez trouver le contexte.filtre propriété utile

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>

Remarque : depuis avril 2017, IE, Opera et Safari ne prennent pas en charge cette fonctionnalité.

Répondu el 27 de Avril, 2017 par seveibar (1147 Points )

Answer 4

3voto

Ricardo Ferreira Points 316

Vous pouvez probablement obtenir le tableau de pixels du bitmap et appliquer un algorithme de flou par-dessus. Par exemple : http://www.jhlabs.com/ip/blurring.html

Répondu el 29 de Mars, 2011 par Ricardo Ferreira (316 Points )

Answer 5

1voto

starbeamrainbowlabs Points 1518

Vous pouvez dessiner un cercle flou à l'aide de la fonction suivante :

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

Répondu el 4 de Juillet, 2012 par starbeamrainbowlabs (1518 Points )

Answer 6

0voto

sebastian.derossi Points 136

Si vous souhaitez toujours voir cet effet réalisé avec EaselJS, voici ce qui pourrait vous aider 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();

Répondu el 26 de Avril, 2013 par sebastian.derossi (136 Points )

Comment dessiner un cercle flou sur le canevas HTML5 ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment dessiner un cercle flou sur le canevas HTML5 ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: