在Javascript中使用畫布創建圖像

我似乎碰到了一個錯誤消息，說明我很難調試。我想要做的是用畫布動態創建一個圖像，例如這一個（http://www.webreference.com/programming/javascript/mk/column3/creating/cp_mini_gradient_details.png ）。在Javascript中使用畫布創建圖像

我得到的錯誤信息是：

[Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)"]

我一派，並似乎有許多原因有關此錯誤消息，但我似乎無法找到任何有關帆布特別。

這裏是我的代碼：

var newCanvas = document.createElement('canvas'); 
newCanvas.height="30"; 
newCanvas.width="113"; 
document.body.appendChild(newCanvas); 

var context = newCanvas.getContext('2d'); 

context.fillStyle = '#FFFFFF'; 
context.fillRect(0, 0, 113, 15); 
context.fillStyle = '#000000'; 
context.fillRect(0, 15, 113, 30); 

var numCanH = Number(newCanvas.height); 
var numCanW = Number(newCanvas.width); 
var imgd; 
if (context.createImageData) { 
    console.log('context.createImageData'); 
    imgd = context.createImageData(numCanW, numCanH); 
} 
else if (context.getImageData) { 
    console.log('context.getImageData'); 
    imgd = context.getImageData(0, 0, numCanW, numCanH); 
} 
else { 
    console.log('else'); 
    imgd = {'width' : numCanW, 'height' : numCanH, 'data' : new Array(numCanW*numCanH*4)}; 
} 
var pix = imgd.data; 
var ndv = numCanW/6; 

for (var i = 0; i <= numCanH; i++) { 

    var a=1-Math.abs(2*i-numCanH)/numCanH; 

    for (var j = 0; j < numCanW; j+=4) { 

     var bitUp = Math.ceil((255/130)*j); 
     var bitDown = 255-bitUp; 

     if(j<(ndv)){ //Red to Yellow - (rgb) 255,0,0 to 255,255,0 
      pix[j] = 255; // red channel 
      pix[j+1] = bitUp; // green channel 
      pix[j+2] = 0; // blue channel 
     }  
     else if(j>(ndv) && j<(ndv)*2){ //Yellow to Green - (rgb) 255,255,0 to 0,255,0 
      pix[j] = 255; // red channel 
      pix[j+1] = bitDown; // green channel 
      pix[j+2] = 0; // blue channel 
     } 
     else if(j>(ndv)*2 && j<(ndv)*3){ //Green to Cyan - (rgb) 0,255,0 to 0,255,255 
      pix[j] = 0; // red channel 
      pix[j+1] = 255; // green channel 
      pix[j+2] = bitUp; // blue channel 
     } 
     else if(j>(ndv)*3 && j<(ndv)*4){ //Cyan to Blue - (rgb) 0,255,255 to 0,0,255 
      pix[j] = 0; // red channel 
      pix[j+1] = bitDown; // green channel 
      pix[j+2] = 255; // blue channel 
     } 
     else if(j>(ndv)*4 && j<(ndv)*5){ //Blue to Magenta - (rgb) 0,0,255 to 255,0,255 
      pix[j] = bitUp; // red channel 
      pix[j+1] = 0; // green channel 
      pix[j+2] = 255; // blue channel 
     } 
     else if(j>(ndv)*5 && j<(ndv)*6){ //Magenta to Red - (rgb) 255,0,255 to 255,0,0 
      pix[j] = 255; // red channel 
      pix[j+1] = 0; // green channel 
      pix[j+2] = bitDown; // blue channel 
     }    

     pix[j+3] = a; // alpha channel+ 

     console.log('bitUp '+bitUp); 
     console.log(typeof bitUp); 
     console.log('bitDown '+bitDown); 
     console.log(typeof bitDown); 
     console.log('a '+j); 
     console.log(typeof a); 
     console.log('j '+j); 
     console.log(typeof j); 
     console.log('i '+i); 
     console.log(typeof i); 
     console.log(imgd); 
     console.log('before context.putImageData'); 
     context.putImageData(imgd, j,i); 
     console.log('after context.putImageData');  
    } 
}

奇怪的是，該錯誤只在循環的第二次迭代過程中發生。

來源

2009-02-25 Yansky

我最近發現如何將二維數組的RBG值複製到畫布上 - 這在某些情況下可能會有用。 http://stackoverflow.com/a/13826397/975097 – 2012-12-14 06:53:22

您的putImageData調用嘗試將您創建的imgd的整體繪製爲畫布的寬度和高度，並放入（j，i）左上角的畫布中。這在lop的第一次迭代之後失敗，因爲imgd的底部/右側離開畫布的底部/右側。

將putImageData調用放到外部循環之外並使其始終在（0,0）處繪製。另外，在計算你設置的像素的數組索引時，不要忘記添加i * numCanW * 4;並注意你的內循環需要從0到iCanW * 4而不是0到iCanW，因爲你正在對顏色分量進行交織，而不是像素。

來源

2009-02-25 17:09:13 moonshadow

在Javascript中使用畫布創建圖像

回答

相關問題