javascript - JavaScript キャンバス フェザー アーク

Question

現在、canvas タグで円弧を描いていますが、円弧のエッジをぼかす (柔らかくする) ことができるかどうか尋ねられました。これは可能ですか？ここでグーグルで検索すると、価値があるよりも面倒なようです。

私も mdn を調べてみましたが、要素をフェザリングするためのリソースはまばらに見えます。

Answer 1

コメントでリンクしている画像から、影を付けようとしているようです。

この場合、これを行うことができます：

このコードで：

c.beginPath();
c.arc(33, 33, 22, 0, Math.PI, false);
c.shadowOffsetX = 2;
c.shadowOffsetY = 2;
c.shadowBlur = 5;
c.shadowColor  = 'rgba(0, 0, 0, 0.8)';
c.fillStyle = "red";
c.fill();

デモンストレーション

または、これをやろうとしているのかもしれません:

c.beginPath();
c.arc(33, 33, 22, 10, Math.PI*2, false);
c.lineWidth = 2;
var gradient = c.createLinearGradient(20, 0, 50, 40);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1, "white");
c.strokeStyle = gradient;
c.stroke();

デモンストレーション

Answer 2

残念ながらフェザー オプションは (まだ) ありませんが、この質問に答えた誰か が、おそらく RGBA グラデーションを使用して達成したいものにかなり近いこのフィドルを思いつきました:

gradient.addColorStop(0,    "rgba("+r+","+g+","+b+",0)");

ここで彼の jsfiddle を参照してください: http://jsfiddle.net/chdh/MmYAt/

しかし、それはまだ少し面倒です。これについて機能リクエストを送信したいのですが、どこにあるのかわかりません。