【Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 】 javascript/Html5/canvas 错误

错误概要：html5 canvas元素，drawImage() 函数参数范围错误。

近期制作html5拼图游戏，其中用到canvas中的drawImage()函数来划分图片，使用的为9个参数的drawImage()。其中使用chrome/opera/fireFox 都发现了此错误，但是在IE中能正常划分（留作问题下次探索）。

经过多次测试与资料查询，终于发现了原因。

drawImage()函数共有三种（具体用法请自己查找）：

// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy); 

// Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh); 

// Nine arguments: the element, source (x,y) coordinates, source width and 
// height (for cropping), destination (x,y) coordinates, and destination width 
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh); 

我使用了第三种函数，但是在sx，sy，sw，sh配合取得源图像的部分时候，超出了源图像的边界，导致错误。

另外，我查阅到了国外相似的资料，也主要是canvas中插入图形函数有问题导致的：

http://stackoverflow.com/questions/2444073/javascript-uncaught-error-index-size-err-dom-exception-1（It happens because circlesR values can become negative at some point. The radius of a circle cannot be negative；插入圆形的函数中，半径参数为负）

http://stackoverflow.com/questions/3571279/javascript-canvas-uncaught-error-index-size-err-dom-exception-1（drawImage()函数参数越界源图像）

综上，该错误主要为canvas应用中参数的数值错误。另外，本文章没有对该错误的全面原因进行探讨，开始的IE9为什么能正常运行由于时间关系没有进一步探索。文章旨在为该错误改正提供大致方向，各位同行欢迎补充意见！

刘晓宁

2011年8月25日