是否可以使用画布制作渐变透明/图层蒙版图像？

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/