文章/答案/技术大牛

发布

社区首页 >问答首页 >动力学α掩模

问动力学α掩模
EN

Stack Overflow用户

提问于 2014-04-01 07:41:28

回答 1查看 205关注 0票数 0

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

结果：

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

有什么想法？

javascript

html

canvas

kineticjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-02 05:17:32

使用屏幕外的html画布为您进行alpha混合(正如您前面所做的)。

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22779637

复制

相似问题

问动力学α掩模
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动力学α掩模EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动力学α掩模
EN