Question

使用HTML5 <canvas>元素，可以使用一个画布来屏蔽另一个画布。例如，以下代码将采用顶部画布，使用中间画布的alpha并将结果转储到底部画布：

HTML：

<body style="background-color:#333;">
<img id="SourceImage" src="Src.png" style="display:none">
<img id="MaskImage" src="Mask.png" style="display:none">
<div><canvas id="cSrc"></canvas></div>
<div><canvas id="cMask"></canvas></div>
<div><canvas id="cDest"></canvas></div>

的javascript：

var objSrc = document.getElementById('cSrc').getContext('2d');
var objMask = document.getElementById('cMask').getContext('2d');
var objDest = document.getElementById('cDest').getContext('2d');

objSrc.drawImage(document.getElementById("SourceImage"),0,0);
objMask.drawImage(document.getElementById("MaskImage"),0,0);

var imgs = objSrc.getImageData(0, 0, 300, 150);
var imga = objMask.getImageData(0, 0, 300, 150);
var pix = imgs.data;
var pixa = imga.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i+3] = pixa[i+3];
}

objDest.putImageData(imgs, 0, 0);

结果：

canvas mask result

我如何在Kineticjs中做同样的事情？例如，有没有办法使用一个Kinetic.Layer作为另一个Kinetic.Layer的掩码，然后将结果转储到可见的Kinetic.Layer？我查看了clip(clip)方法，但它似乎更适合在画布上切割矩形孔（可能用于裁剪？）。

思想？

Answer 1

使用屏幕外的html画布进行alpha混合（如上所述）。

然后使用#objDest作为Kinetic.Image的来源。

var image1=new Kinetic.Image({
    image:objDest,
    ...
});

Kineticjs alpha面具

1 个答案: