javascript - javascript Canvas 未捕获的错误:INDEX_SIZE_ERR:DOM异常1

好的，我有两个版本的代码。第一个似乎可以正常工作（大部分），第二个可以给我主题名称中的Uncaught Error。

defs:

var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;
var NUM_WID = 3;
var NUM_HIGH = 3;


var TILE_WIDTH = VID_WID / NUM_WID;
var TILE_HEIGHT = VID_HIGH / NUM_HIGH;
var OUT_WIDTH = OUT_WID / NUM_WID;
var OUT_HEIGHT = OUT_HIGH / NUM_HIGH;

Working:
    tile.sx = x*TILE_WIDTH;
    tile.sy = y*TILE_HEIGHT;
    tile.dx = x*OUT_WIDTH;
    tile.dy = y*OUT_HEIGHT;
...
    draw.drawImage(copycanvas, tile.sx, tile.sy,
        TILE_WIDTH, TILE_HEIGHT,
        tile.dx, tile.dy,
        OUT_WIDTH, OUT_HEIGHT);

Gets Exception:
    tile.sx = x;
    tile.sy = y;
    tile.dx = x;
    tile.dy = y;
...
    draw.drawImage(copycanvas, tile.sx*TILE_WIDTH, tile.sy*TILE_HEIGHT,
        TILE_WIDTH, TILE_HEIGHT,
        tile.dx*OUT_WIDTH, tile.dy*OUT_HEIGHT,
        OUT_WIDTH, OUT_HEIGHT);

我所看到的唯一区别是，我在哪里乘以WIDTH和HEIGHT参数。但是其中一项有效，而另一项例外。

我想使用后面的代码，因此我可以直接对x组合.sx和.dx的x和y值，而不是sx / TILE_WIDTH == dx / OUT_WIDTH。我想我总是可以再添加几个字段来重复这些工作，但是看来我不必这样做。

知道为什么一个有效而另一个无效吗？

最佳答案

首先请看下面的图片。

我也得到了相同的错误代码。
在我的情况下，“源图像”的大小为640 x 480。
我为sx，sy参数分配了10,10，为sWidth，sHeight参数分配了640,480。
然后我得到了与您相同的错误代码。

由于sx，sy参数将捕获窗口移动了10,10像素，
sWidth，sHeight窗口超出范围。

在我的想法中，由于没有要引用的数据，导致了INDEX_SIZE_ERROR。
，我将超大的sWidth设置为sHeight。



drawImage（image，sx，sy，sWidth，sHeight，dx，dy，dWidth，dHeight）

关于javascript - javascript Canvas 未捕获的错误:INDEX_SIZE_ERR:DOM异常1，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3571279/