在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中使用画布创建图像

回答

相关问题