javascript-无法在画布上绘制

我一直在尝试在某些页面顶部插入画布,但是对于某些页面却不起作用.似乎是我在清理页面上的所有画布,但是在页面代码的任何地方都找不到对.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 / heightcalls,而是我不知道画布的最大大小为：Maximum size of a <canvas> element

解决方法:

因为document.width和document.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.上的注释,具体如下：

Starting in Gecko 6.0, document.width is no longer supported. Instead, use document.body.clientWidth.

标签：html5,canvas,html5-canvas,javascript
来源： https://codeday.me/bug/20191122/2063742.html