是否可以使用canvas制作渐变透明/图层蒙版图像？ [英] Is it possible to make a gradient-transparent/layer masking image using canvas?

问题描述

我一直在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

解决方案

我在此处添加了一些代码 http://code.google.com/p/canvasimagegradient/ 添加了一个 drawImageGradient 函数到CanvasRenderingContext2D。您可以使用线性或径向渐变绘制图像。它不工作在IE，即使与excanvas，由于缺乏getImageData / putImageData支持。

以下代码示例将绘制一个径向渐变的图像（上下文检索和图片加载未显示）：

  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. 动态创建canvas元素并在其上绘制图像。


2. 检索此新画布的imageData


3. 检索


4. 迭代目标imageData并更新每个像素，将一个百分比（从渐变透明度值导出）添加到

b b b b b b b b

显然，随着图像变大，性能是一个问题。 http://code.google.com/p/canvasimagegradient/ 上的图片约6-10ms绘制。 1024x768图像需要大约100ms-250ms来绘制。仍然可以使用，只要你不是动画。




I've been following the lessons about transparency and gradients on the Mozilla site: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors but I have not been able to figure this one out.

I know I can achieve these effects with a png image; however, in the program I am working on the gradient will change constantly according to where the image is moved.

Here's an example of the effect I'm looking for. http://home.insightbb.com/~epyonxl1/gradientex.jpg

解决方案

I've aded some code here http://code.google.com/p/canvasimagegradient/ that adds a drawImageGradient function to the CanvasRenderingContext2D. You can draw an image with a linear or radial gradient. It doesn't work in IE, even with excanvas, due to the lack of getImageData/putImageData support.

The following code for example will draw an image with a radial gradient (context retrieve and image load not shown):

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

The code works as follows:

1. Create a canvas element dynamically and draw the image on it.
2. Retrieve the imageData for this new canvas.
3. Retrieve the imageData for the location on the canvas you want to draw the image on to.
4. Iterate through the destination imageData and update each pixel adding together a percentage (derived from the gradient transparency value) of the image and destination pixel values.
5. Finally put the updated image data back onto the destination canvas.

Obviously performance is an issue as images get larger. The image on http://code.google.com/p/canvasimagegradient/ it takes about 6-10ms to draw. A 1024x768 image takes about 100ms-250ms to draw. Still usable though as long as you're not animating.

这篇关于是否可以使用canvas制作渐变透明/图层蒙版图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！