Multiply effect kinteicjs答案

【问题标题】：Multiply effect kinteicjsMultiply effect kinteicjs
【发布时间】：2014-02-08 00:05:35
【问题描述】：

我想知道必须使用 kineticjs 框架制作多重效果。接下来是我的问题：

我的背景是图片我需要在图像上绘制多边形并对新多边形应用乘法效果。

有人可以帮忙吗？

谢谢

【问题讨论】：

标签： javascript html canvas html5-canvas kineticjs

【解决方案1】：

您可以通过以下方式应用图像过滤器：

读取要过滤的图像的 rgb 像素--context.getImageData
根据您的过滤器更改 rgb 像素值
用改变后的像素替换图像中的像素--context.putImageData

以下是如何将乘法滤镜应用于图像：

function multiply(R,G,B){
    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    data = imgData.data;
    for (var i=0;i<data.length;i+=4){
        data[i  ] = R*data[i]/255;
        data[i+1] = G*data[i+1]/255;
        data[i+2] = B*data[i+2]/255;
    }
    ctx.putImageData(imgData,0,0);
}

// Usage:
multiply(130,130,200)

【讨论】：

嗯，我不确定你是怎么理解我的，但我需要用乘法实现混合。
轻笑，是的，我看错了你的问题！请参阅我更改的答案，展示如何将乘法滤镜应用于图像。
好的，但是如何只在多边形所在的图像部分应用乘法？
只限制你得到多边形边界框的像素：context.getImageData(polyX,polyY,polyWidth,polyHeight) 和 context.putImageData(imageData,polyX,polyY);
顺便说一句，如果您想使用不透明的多边形像素将现有背景图像相乘，则必须将多边形绘制到单独的画布上。然后在 两个画布上使用 getImageData 并有条件地仅乘以单独画布中的非透明像素。