更改宽度后,JavaScript画布将消失
运行此代码后:更改宽度后,JavaScript画布将消失,javascript,canvas,Javascript,Canvas,运行此代码后: var inventoryCanvas = document.getElementById("inventoryCanvas"); inventoryCanvas.width = width2; 它可以正常执行,但是当我运行它时画布消失了 有人知道原因吗?没有办法阻止这种情况,因为这是预期的行为,我有一个类似的问题,通过创建一个隐藏的缓冲区画布解决了它。在调整大小之前,可以将原始画布复制到此缓冲区,调整旧画布的大小,然后从缓冲区重新绘制 下面是一个快速的小提琴演示: 你对此有
var inventoryCanvas = document.getElementById("inventoryCanvas");
inventoryCanvas.width = width2;
它可以正常执行,但是当我运行它时画布消失了
有人知道原因吗?没有办法阻止这种情况,因为这是预期的行为,我有一个类似的问题,通过创建一个隐藏的缓冲区画布解决了它。在调整大小之前,可以将原始画布复制到此缓冲区,调整旧画布的大小,然后从缓冲区重新绘制 下面是一个快速的小提琴演示:
你对此有意见吗?
width2
的值是多少?听起来很完美-我会很感激。非常感谢,我应该能够将此应用到我的代码中。向上投票,这可能是调整画布元素大小并恢复其原始内容的最佳方法。另一种不需要第二个画布的方法是,首先将画布的大小调整到预期的最大大小,然后使用div的overflow:hidden将其包装在一个较小的div中——div将成为一个视口,进入较大的画布。
var canvas = document.getElementById('canvas'),
buffer = document.getElementById('buffer'),
context = canvas.getContext("2d"),
bufferContext = buffer.getContext("2d");
bufferContext.drawImage(canvas, 0, 0); //Make a copy of the canvas to hidden buffer
canvas.width = 50; //Resize
context.drawImage(buffer, 0, 0); //Draw it back to canvas