javascript - 是否可以使用 Canvas 制作渐变透明/图层蒙版图像？

Question

我一直在学习 Mozilla 网站上有关透明度和渐变的类(class):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

可以使用 context.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);

这不会对每个像素进行操作，应该会更快