HTML5キャンバス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例here

Answer 1

問題が

• すでに固定数学のエラーでした。
• RGBA指定子は0..255から0.1になります。
• ピクセルデータを黒の不透明なピクセル（デフォルトでは白です）で塗りつぶす必要があります。

コードを数行追加して新しいフィドルを作成しました。

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

今、あなたは黒い四角に赤いひし形が表示されるはずです。