如何在畫布圖像上做徑向漸變？

-1

我有一張圖片。當用戶用鼠標點擊它時，我想獲得鼠標位置的像素，並在點擊鼠標的特定半徑處淡化圖像？如何在畫布圖像上做徑向漸變？

檢查此琴："http://jsfiddle.net/qFuDr/711/"

當我點擊鼠標，然後移動甚至我鬆開鼠標像素得到清除，背景是可見的

我想順利的圓，也很清楚像素要計算像素的百分比去除

希望你明白我的問題

來源

2014-07-11 user3125407

我爲你創建了一個使用'createRadialGradient'的例子，在這種情況下不需要使用掩碼。我和@icktoofay過於複雜的解決方案。 –

你可以採取的globalCompositeOperation和012的優勢我在這裏（http://jsfiddle.net/icodeforlove/T7qGh/4）做了一個簡單的演示

canvas.addEventListener('mousemove', function (event) { 
    var rect = document.body.getBoundingClientRect(), 
     x = event.pageX - rect.left, 
     y = event.pageY - rect.top; 

    context.drawImage(image, 0, 0, canvas.width, canvas.height); 

    context.save(); 
    context.globalCompositeOperation = 'destination-out'; 

    var gradient = context.createRadialGradient(x, y, 0, x, y, 500); 
    gradient.addColorStop(0, 'rgba(0,0,0,1)'); 
    gradient.addColorStop(1, 'rgba(0,0,0,0)'); 
    context.fillStyle = gradient; 

    // repeat to intensify the fade 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    context.restore(); 
});

來源

2014-07-11 02:47:47

+1，因爲徑向漸變+合成將完成任務。順便說一句，我認爲提問者想要與你所說明的效果相反 - 他們希望圖像在鼠標位置完全可見，並在效果半徑範圍內淡出。 – markE

哦這麼喜歡這個http://jsfiddle.net/icodeforlove/T7qGh/5/ :) –

我想清除在一個小半徑的鼠標位置的圖像，並顯示背景 – user3125407

您可以用<canvas>標籤做到這一點。特別是，您可以創建一個畫布。然後，您創建一個剪貼蒙版，該蒙版僅排除您希望排除的區域。然後將舊圖像繪製到其中。您的新畫布將包含結果。然後，您可以清除舊畫布，然後從新畫布中繪製圖像，然後您可以放棄該畫布。創建剪貼蒙版時，請注意纏繞。

除了概念簡單之外，此方法優於直接修改圖像數據的優點是它可以與交叉源圖像源一起使用。交叉原點圖像不能檢查或操縱其圖像數據，但可以根據需要進行繪製和裁剪。

來源

2014-07-11 02:50:15 icktoofay

你也可以使用'createRadialGradient'和'globalCompositeOperation'來獲得更平滑的效果。 –

如何在畫布圖像上做徑向漸變？

回答

相關問題