HTML5 canvas putImageData 예상치 못한 결과를 얻지 못하는 픽셀로 보입니다.

일부 맞춤 코드를 사용하여 등각 투영 사각형을 그려 픽셀 데이터를 작성한 다음 putImageData를 사용하여 캔버스에 배치하려고합니다.HTML5 canvas 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

출처

2011-08-12 Tristan

수학 문제를 파악하지 못했지만 빨간색을 보려면 고정 알파가 1이 아닌 255가되어야합니다. 적어도 흰색 배경에 빨간색 v 모양이 나타납니다. –

그게 메신저가 잘못 됐어? 나는 알파가 0과 1 사이라고 생각 했습니까? 또는 픽셀 데이터가 CSS rgba와 비교하여 다른가요? – Tristan

나는 또한 그것의 아주 버그 투성이이며 이미 테스트 한 것을 볼 수 없었기 때문에 예상했던 모양을 만들지 못했다. – Tristan

문제는

이미 고정 된 수학 오류가 있었다.
RGBA 지정자는 0..255가 아니라 0.1입니다.
픽셀 데이터를 검은 색 불투명 한 픽셀로 채워야합니다 (기본값은 흰색 임).

몇 줄의 코드를 추가하고 새로운 바이올린을 만들었습니다.

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

이제 검은 사각형에 붉은 다이아몬드를 볼 수 있습니다.

출처

2011-08-12 16:57:13

HTML5 canvas putImageData 예상치 못한 결과를 얻지 못하는 픽셀로 보입니다.

답변

관련 문제