Javascript JS画布-使用Alpha放置图像数据？

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

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

这很好用，尤其是在桌面上。但为了完成这一点，我必须从头开始编写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;
        }
    }

var offset=（canvasW*4*y）+x*4；
对于（var r=0；r

每层大约需要50毫秒。对于桌面来说不是很好。ipad需要1200毫秒的时间！所以我用原始的putImageData（不支持alpha）对它进行了测试，结果仍然不太令人印象深刻，但这是我认为最好的

这就是我的问题。我知道有一个整体不透明的画布绘制，但它需要能够绘制一些像素完全不透明和一些完全透明。是否存在包含不透明度的putImageData

---

如果没有任何关于如何完成这一点的建议？

正如@Jeffrey Sweeney所提到的，试着将画布叠在一起。对于我的一个Javascript库（在那里搜索

z-index

），我做了同样的事情

---

我有一个容器

div

，里面塞满了许多

canvas

dom来模拟层。所有的

canvas

dom都是绝对定位的，它们的

z-index

定义了层的顺序。在您的情况下，您必须在特定层应用样式以设置其不透明度。

您是否考虑过使用两个画布相互重叠，并且底部画布的不透明度为0.5或其他值？