HTML5 canvas putImageData似乎与像素混淆，没有得到预期的结果

Question

我正在尝试用一些自定义代码来绘制等距正方形，以构建像素数据，然后将其放在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
});

Answer 1

问题是

• 一个已经修复的数学错误。
• RGBA规范从0..
• 你需要用黑色不透明像素填充你的像素数据(默认是白色的)。

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

http://jsfiddle.net/bsssq/1/

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