Question

我曾经使用这三行AS3在Flash中创建一个渐变蒙版，同时在舞台上有两个动画片段，其中一个有一个渐变块：

gradientMask_mc.cacheAsBitmap = true;
something_mc.cacheAsBitmap = true;
something_mc.mask = gradientMask_mc;

现在我正在尝试使用Flash CC的HTML5 Canvas，我似乎找不到相应的东西。它是完全不同的设置还是什么？我的搜索仅产生AS3解决方案。拜托，谢谢！

Answer 1

在纯HTML5画布和javascript中使用渐变混合两个图像。

// img1, img2 are the two images 
// ctx is the canvas.


// setup. Only do this once or when you change the masking
// create a mask canvas the size of the first image
var gradImg1Masked = document.createElement("canvas");
gradImg1Masked.width = img1.width;  // set the width and height
gradImg1Masked.height = img1.height;

var ctx1 = gradImg1Masked.getContext("2d",{ alpha: true }); // get the context

var gradient = ctx1.createLinearGradient(0, 0, 0, img1.height); // create a gradient
                                                                // assuming its from 
                                                                // top to bottom.

// add colour stops black full opaque at top to full transparent at bottom
gradient.addColorStop( 0, "rgba(0,0,0,1)" );
gradient.addColorStop( 1, "rgba(0,0,0,0)" );   

ctx1.globalAlpha = 1;  // ensure alpha is on full
ctx1.globalCompositeOperation = "source-over"; // ensure correct filter   
ctx1.drawImage(img1, 0, 0);  // draw the image on the mask canvas

ctx1.fillStyle = gradient;   // set the fill style
ctx1.globalCompositeOperation = "destination-in"; // set filter to mask letting
                                               // only opaque pixels in   
ctx1.fillRect(0, 0, img1.width, img1.height); // create the masked image
                                              // by rendering the gradiant ontop

// gradImg1Masked is now the masked copy of img1

那是设置。下面是渲染。

// Rendering the images with the mask
// simply draw the second image and the the first on top
// ctx is the render surface you are displaying
// x and y are where you want the top left of the images to be.
ctx.globalAlpha = 1;  // ensure alpha is on full
ctx.globalCompositeOperation = "source-over"; // ensure correct filter   

// draw the second image at x,y screen pos
ctx.drawImage(img2,0,0,img2.width,img2.height,x,y,img2.width,img2.height);

// draw the masked image ontop using the second image's size
ctx.drawImage( gradImg1Masked, 
       0, 0, gradImg1Masked.width, gradImg1Masked.height,
       x, y, img2.width, img2.height);

希望这会有所帮助。 Flash CC的HTML5 Canvas可能有一种更简单的方法，但我发现框架提供的功能远远超过功能强大的HTML5 / Javascript，同时模糊了正在发生的事情，也减慢了一切。他们的使用当然是个人决定。

什么是Flash CC for HTML5 Canvas中的等效渐变蒙版？

1 个答案: