JavaScript的帆布羽弧canvas標籤

我目前正在繪製弧形，我一直在問我是否可以羽毛（軟化）弧的邊緣。這可能嗎？在這裏使用谷歌搜索和搜索似乎比它的價值更麻煩。JavaScript的帆布羽弧canvas標籤

我試過看mdn，但羽化元素的資源似乎很稀疏。

2012-11-22 Dave Mackintosh

你能提供你要求的截圖嗎？我*認爲*我知道，但我不想花時間在演示中，然後離開。 – Loktar

所以我正在尋找一個沿着這些線使用我在互聯網上找到的clearArc原型的效果。如果可能的話，如果無法完成則不是交易斷路器。 http://www.jma.duq.edu/classes/shepherd/jma260-03-and-04/Photoshop/Toolbox/feather-ex.jpg –

您是否嘗試過使用則shadowColor/shadowBlur？ – kangax

從您在評論中鏈接到的圖像看來，您似乎在試圖做一個陰影。

如果是這樣的話，你可以這樣做：

enter image description here

有了這個代碼：

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

Demonstration

或者，也許你正在試圖做的這個：

enter image description here

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

Demonstration

來源

2012-11-23 15:08:03

這看起來好像會做伎倆，不幸的是，我現在不能嘗試，但我明天會看看，讓你知道我是怎麼做的。 –

它很接近但並不完全在那裏，我非常欣賞你投入的時間，我已經將它標記爲解決方案，因爲它足夠接近但並不完美，在觸摸事件的iPad上表現不佳。我已經拋棄了這個想法，但是再次感謝。 –

不幸的是沒有羽毛選項（還），但有人誰回答this question 來到了這個小提琴其中涉及可能非常接近你想要使用RGBA梯度達到什麼樣的：

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

看他的jsfiddle這裏：http://jsfiddle.net/chdh/MmYAt/

但它仍然有點麻煩。我想提交一個功能請求，但我根本不知道在哪裏？

來源

2012-11-23 15:39:06

JavaScript的帆布羽弧canvas標籤

回答

相關問題