是否可以使用畫布製作漸變透明/圖層蒙版圖像？

Question

我一直在關注Mozilla網站上關於透明度和漸變的課程：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors，但我一直未能弄清楚這一點。

我知道我可以用PNG圖像來實現這些效果;然而，在我正在研究的程序中，漸變將根據圖像移動的位置不斷變化。

下面是我正在尋找的效果示例。 http://home.insightbb.com/~epyonxl1/gradientex.jpg

Answer 1

我已經在這裏添加了一些代碼http://code.google.com/p/canvasimagegradient/，它爲CanvasRenderingContext2D添加了一個drawImageGradient函數。您可以使用線性或徑向漸變繪製圖像。由於缺乏getImageData/putImageData支持，它在IE中不起作用，即使使用excanvas也是如此。

例如下面的代碼將繪製具有徑向梯度的圖像（上下文檢索和圖像負荷未示出）：

var radGrad = ctx.createRadialGradient(
    img.width/2, img.height/2, 10, 
    img.width/2, img.height/2, img.width/2); 
radGrad.addColorStop(0, "transparent"); 
radGrad.addColorStop(1, "#000"); 

ctx.drawImageGradient(img, 112.5, 130, radGrad); 

代碼工作如下：

1. 創建畫布元件動態地繪製圖像。
2. 檢索此新畫布的imageData。
3. 檢索要繪製圖像的畫布上位置的imageData。
4. 遍歷目標圖像數據並更新每個像素，將圖像和目標像素值的百分比（從梯度透明度值導出）相加。
5. 最後將更新後的圖像數據放回到目標畫布上。

顯然性能是圖像變大的一個問題。 http://code.google.com/p/canvasimagegradient/上的圖像需要大約6-10ms才能繪製。一個1024x768的圖像需要大約100ms-250ms才能繪製。儘管只要你沒有動畫，仍然可以使用。

Answer 2

如果您需要將透明圖像設置爲ctx.globalAlpha以滿足您的任何需要（1，不透明，默認情況下）。然後在繪製圖像後重置它。該網址可能也會幫助https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing。

Answer 3

它可能使用上下文。globalCompositeOperation使面膜

context.drawImage(img, 0, 0, img.width, img.height, 0,0, img.width, img.height); 
context.globalCompositeOperation = "destination-out"; 
gradient = context.createLinearGradient(0, 0, 0, img.height); 
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)"); 
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); 
context.fillStyle = gradient; 
context.fillRect(0, 0, img.width, img.height); 

這不每個像素處理做的，應該是更快

Answer 4

要使用透明面罩它的第一個必要採取兩個圖像中的一個，並把它正確合併兩個圖像到關閉屏幕帆布，並添加使用context.globalCompositeOperation = destination-out每@ Tommyka的回答

var offscreen = document.createElement('canvas'); // detached from DOM 
var context = offscreen.getContext('2d'); 
context.drawImage(image1, 0, 0, image1.width, image1.height); 

var gradient = context.createLinearGradient(0, 0, 0, img.height); 
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)"); 
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); 
context.globalCompositeOperation = "destination-out"; 
context.fillStyle = gradient; 
context.fillRect(0, 0, image1.width, image1.height); 

然後，爲了真正合並兩個圖像，你個所需的透明面具恩需要將其他圖像繪製到另一個畫布，然後簡單地畫阿爾法複合屏幕外的畫布上，最重要的是：

var onscreen = document.getElementById('mycanvas'); 
var context2 = onscreen.getContext('2d'); 
context2.drawImage(image2, 0, 0, image2.width, image2.height); 
context2.drawImage(offscreen, 0, 0, onscreen.width, onscreen.height); 

演示在http://jsfiddle.net/alnitak/rfdjoh31/4/