JS Canvas - 使用 Alpha 放置图像数据？答案

【问题标题】：JS Canvas- Put Image Data With Alpha?JS Canvas - 使用 Alpha 放置图像数据？
【发布时间】：2012-02-16 07:49:24
【问题描述】：

我正在开发一个 ipad 网络应用程序，您可以在其中绘制并保存它。就像一个更基本的绘画程序。我需要能够将图像上传到背景并在其上绘图。现在这不会太难，因为我得到了绘图功能，并且将图像打印到背景并在其上绘图并不难。我遇到的问题是它还需要具有可管理的层。这意味着它需要支持 alpha 像素。

所以我所做的是编写了一个面板类，当调用paint 时，它会向下移动通过它的子面板并将它们的缓冲图像绘制到临时图像。然后我把它画在父级上 - 继续直到图像被展平为临时图像。

这很好用——尤其是在桌面上。但要实现这一点，我必须从头开始编写 putImageData 代码，该代码循环遍历像素数组并在考虑 alpha 的情况下绘制它们。就这样-

    var offset = (canvasW*4*y)+x*4;
    for(var r = 0; r < newHeight; r++)
    {
        var lineOffset = (size.width*4 - columns)*r + offset;
        for(var c = 0; c < columns; c+=4)
        {
            var start = (r*columns)+c;
            var destStart = start+lineOffset;
            var red = imageData[start];
            var green = imageData[start+1];
            var blue = imageData[start+2];
            var alpha = imageData[start+3];

            var destRed = canvasData[destStart];
            var destGreen = canvasData[destStart+1];
            var destBlue = canvasData[destStart+2];
            var destAlpha = canvasData[destStart+3];

            var opacity = alpha/255;
            var destOpacity = destAlpha/255;
            var invOpacity = 1-opacity;

            var newRed = Math.abs(red - ((red-destRed)*invOpacity));
            var newGreen = Math.abs(green - ((green-destGreen)*invOpacity));
            var newBlue = Math.abs(blue - ((blue-destBlue)*invOpacity));

            canvasData[start+lineOffset] = newRed;
            canvasData[start+lineOffset+1] = newGreen;
            canvasData[start+lineOffset+2] = newBlue;
            canvasData[start+lineOffset+3] = 255;
        }
    }

每层大约需要 50 毫秒。不太适合台式机。 ipad 耗时 1200 毫秒！所以我用原始的 putImageData（它不支持 alpha）对其进行了测试，它仍然不是很令人印象深刻，但这是我想的最好的。

所以这是我的问题。我知道用画布绘制总体上不透明，但它需要能够绘制一些完全不透明的像素和一些完全透明的像素。是否有包含不透明度的 putImageData？

如果没有关于如何完成此任务的任何建议？

【问题讨论】：

您是否考虑过使用两个相互重叠的画布，并让底部画布的不透明度为 0.5 之类的？

标签： javascript ipad html canvas opacity

【解决方案1】：

正如@Jeffrey Sweeney 所说，尝试将画布堆叠在一起。对于我的一个 Javascript 库，CInk（在那里搜索z-index），我做了同样的事情。

我有一个容器 div，我在其中塞满了许多 canvas DOM 来模拟图层。所有canvas DOM 都是绝对定位的，它们的z-index 定义了层的顺序。在您的情况下，您必须在特定图层上应用样式以设置其不透明度。

【讨论】：