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
});

Пример JSFiddle здесь

Answer 1

Проблемы были

• математическая ошибка, которую вы уже исправили.
• Спецификаторы RGBA идут от 0..255, а не 0..1
• Вам нужночтобы заполнить данные ваших пикселей черными непрозрачными пикселями (по умолчанию они белыми).

Я добавил несколько строк кода и сделал для вас новую скрипку.

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

Теперь вы должны увидеть красный бриллиант на черном квадрате.