3

我一直在尝试在某些页面上插入画布,但对于某些页面它不起作用。似乎是我清除了页面上的所有画布,但是我在页面上的代码中的任何地方都找不到对 .clearRect 的任何调用。

canvas = document.createElement('canvas');
canvas.width = document.width;
canvas.height = document.height;

canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);

有问题的页面是:http ://www.nrk.no/sognogfjordane/helse-forde-har-ikkje-full-oversikt-1.11166801

如果您在此页面上运行相同的代码,它应该可以工作。预期结果是页面上出现一个巨大的黑色方块。

我不明白脚本如何阻止在页面上使用插入的画布。

我正在使用 Chrome。

* 编辑 *

问题不在于我使用了不推荐使用的document.width/height调用,而是我不知道画布有最大尺寸:<canvas> 元素的最大尺寸

4

3 回答 3

4

因为document.widthanddocument.height是未定义的,所以你的画布宽度和高度是 0 和 0。

而是尝试类似:

canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);

你会看到它就好了。

请参阅MDN上的注释。具体来说:

从 Gecko 6.0 开始,不再支持 document.width。相反,使用document.body.clientWidth.

于 2013-08-05T16:48:39.180 回答
0

请查看演示

canvas = document.createElement('canvas');
canvas.width = document.width;
canvas.height = document.height;

canvas.style['z-index'] = 999;
canvas.style.position = 'absolute';
canvas.style.top = 0;
canvas.style.left = 0;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 1000, 1000);

我想这就是你需要的。如果您需要其他内容,请 exaplin 或将您的代码放入 jsfiddle。在此演示中,它正在创建画布元素。

于 2013-08-05T16:52:47.300 回答
0

我一开始以为西蒙·萨里斯是对的,但最终这并没有达到我想要的效果。我想要的是一个覆盖整个页面的。

我通过<canvas> 元素的最大尺寸发现我超出了画布的限制。

于 2013-08-05T18:48:22.663 回答