HTML5のキャンバスに単純な円を描くことができますが、その周りにぼかしを加えたいと思います。
私が見つけたのは このWebサイト で、ここで役立つshadowBlur
プロパティを説明しています。
ただし、円自体をぼやけさせることはできません。 shadowBlur
プロパティが基本的に行うことは、通常の円が描画された後にぼかし効果をペイントすることです。これまでに試したことは jsFiddleに と入力しました。
ご覧のとおり、塗りつぶされた円で周囲にぼかし効果があります。2つの部分はまったくブレンドされていません。私が実際に達成したいのは、円自体が次のように完全にぼやけていることです。
このようにぼかした円を描画する方法はありますか?つまり、円自体にもぼかし効果がありますか?
複雑な既存の描画をぼかすのでない限り、ぼかしアルゴリズムを使用しないことを強くお勧めします。
あなたのケースでは、放射状のグラデーションで長方形を描くだけです。
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);
例:
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年4月現在の注意、IE、OperaおよびSafariはこれをサポートしていません
次の関数でぼやけた円を描くことができます:
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();
}
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();