Javascript HTML5画布图像数据似乎与无法获得预期结果的像素相混淆

我试图用一些自定义代码绘制一个等距正方形来构建像素数据，然后将其放在带有putImageData的画布上

但是我没有得到预期的结果，在快速浏览画布的原始像素数据之后，我建立的所有像素数据似乎都被弄乱了

我想从下面的代码是一个黑色背景上的红色钻石。我哪里做错了

var Drawing = {};

Drawing.DrawIsoMetricSquare = function(cRenderContext, x, y, iWidth, cColor) {
    var iHeight = iWidth / 2;

    var iYPos = Math.floor(iHeight / 2) + 1;
    var iXPos = 0;

    var iRenderGirth = 1;

    cPixelData = cRenderContext.createImageData(iWidth, iHeight);

    var bExpand = true;

    while (iXPos != iWidth) {
        var iCurrentRenderGirth = 0;

        while (iCurrentRenderGirth != iRenderGirth) {
            var iY = iYPos + iCurrentRenderGirth;
            //Draw first pixel then second
            Drawing.ColorPixelAtPos(cPixelData.data, iXPos, iY, iWidth, cColor);
            Drawing.ColorPixelAtPos(cPixelData.data, iXPos + 1, iY, iWidth, cColor);

            iCurrentRenderGirth++;
        }

        //Move to next Render Start
        iYPos = bExpand ? (iYPos - 1) : (iYPos + 1);
        iXPos += 2;
        iRenderGirth = bExpand ? (iRenderGirth + 2) : (iRenderGirth - 2);

        bExpand &= iRenderGirth < iHeight;
    }

    cRenderContext.putImageData(cPixelData, x, y);
};

Drawing.XYPosToPixelPos = function(x, y, iWidth) {
    return (x + y * iWidth) * 4;
};

Drawing.ColorPixelAtPos = function(cPixelData, x, y, iWidth, cColor) {
    var iPixPos = Drawing.XYPosToPixelPos(x, y, iWidth);

    cPixelData[iPixPos++] = cColor.r;
    cPixelData[iPixPos++] = cColor.g;
    cPixelData[iPixPos++] = cColor.b;
    cPixelData[iPixPos] = 1; //Fixed alpha for now
};

var eCanvas = $("<canvas></canvas>");
eCanvas[0].width = 50;
eCanvas[0].height = 50;

$("#render").append(eCanvas);

var cRenderContext = eCanvas[0].getContext('2d');
cRenderContext.fillStyle = "rgba(1, 1, 1, 1)";
cRenderContext.fillRect(0, 0, 50, 50);

Drawing.DrawIsoMetricSquare(cRenderContext, 0, 0, 42, {
    r: 255,
    g: 0,
    b: 0
});

var-Drawing={}；
Drawing.DrawIsoMetricSquare=函数（cRenderContext、x、y、iWidth、C颜色）{
var iHeight=iWidth/2；
var iYPos=数学楼层（iHeight/2）+1；
var iXPos=0；
var iRenderGirth=1；
cPixelData=cRenderContext.createImageData（iWidth，iHeight）；
var-bExpand=true；
while（iXPos！=iWidth）{
var IcurrenderGirth=0；
while（IcurrenderGirth！=iRenderGirth）{
var iY=iYPos+Icurrendernergirth；
//先画第一个像素，然后再画第二个像素
Drawing.ColorPixelAtPos（cPixelData.data，iXPos，iY，iWidth，cColor）；
绘图.ColorPixelAtPos（cPixelData.data，iXPos+1，iY，iWidth，cColor）；
icurrendergrowth++；
}
//移动到下一个渲染开始
iYPos=bExpand？（iYPos-1）：（iYPos+1）；
iXPos+=2；
iRenderGirth=bExpand？（iRenderGirth+2）：（iRenderGirth-2）；
bExpand&=i长周长

jshiddle示例

问题是

• 您已修复的数学错误
• RGBA说明符从0..255开始，而不是从0..1开始
• 您需要用黑色不透明像素（默认为白色）填充像素数据

我添加了几行代码并为您制作了一把新小提琴

---

现在你应该看到黑色正方形上的红色菱形。

我还没能解出你的数学题，但为了看到红色，你需要将固定alpha设置为255，而不是1。我得到了一个红色的v形的白色背景至少。这是我错了吗？我以为阿尔法在0到1之间？或者与css rgba相比，它的像素数据有什么不同吗？我还想象它有很多缺陷，没有产生我预期的形状，因为我无法看到任何东西来测试它。我已经修复了数学问题，它现在在黑色正方形的白色矩形上渲染红色菱形。这个问题现在有点没有意义了，但感谢您的帮助，如果您想回答为什么像素数据中的alpha不同，这是我的问题？是的，像素数据值是r、g、b和a的4个字节。每个值都是一个介于0和255之间的数字。因此，对于像素数据中的alpha值，0是完全透明的，255是完全不透明的。我会用修正后的数学来看看新的小提琴，我会帮你把红色的钻石画在一个黑色的正方形上，然后加上答案。