Comment dessiner un cercle flou sur toile HTML5?
Ce que j'ai trouvé ce site web ce qui explique l' shadowBlur propriété qui peut être utile ici.
cependant, je ne peux pas réussir à rendre le cercle lui-même flou. Ce que l' shadowBlur la propriété does consiste essentiellement à peindre un effet de flou après que le cercle régulier a été dessiné. Ce que j'ai essayé jusqu'à présent, je l'ai mis!--9-->sur jsFiddle.
comme on peut le voir, c'est un cercle plein avec un certain effet flou autour - les deux parties ne se fondent pas du tout. Ce que je voudrais réaliser, c'est que le cercle lui-même est complètement floue comme ceci:
Est-il possible de dessiner un flou cercle comme ça, c'est à dire que le cercle lui-même a un effet de flou?
5 réponses
je suggère fortement contre les algorithmes de flou sauf si vous brouillez un dessin déjà existant qui est complexe.
pour votre cas, il suffit de dessiner un rect 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:
vous pouvez probablement obtenir le tableau de pixels bitmap et appliquer un algorithme de flou sur le dessus de celui-ci. Par exemple: http://www.jhlabs.com/ip/blurring.html
Vous pouvez dessiner un flou cercle avec 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();
}
Vous pouvez trouver le contexte.filtre bien 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: en avril 2017, IE, Opera et Safari ne supporte pas cette
Si vous êtes toujours intéressé à voir cet effet fait avec EaselJS, cela pourrait 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();