更改宽度后,JavaScript画布消失

时间:2015-01-09 15:22:59

标签: javascript canvas

运行此代码后:

var inventoryCanvas = document.getElementById("inventoryCanvas");
inventoryCanvas.width = width2;

它正确执行,但是当我运行时画布消失。

有谁知道这个的原因?

1 个答案:

答案 0 :(得分:1)

没有办法阻止它,因为它是预期的行为,我有一个类似的问题,并通过创建一个隐藏的缓冲区画布解决它。在调整大小之前,您可以将原始画布复制到此缓冲区,调整旧画布的大小,然后从缓冲区重绘。

这是一个快速的小提示,展示它: http://jsfiddle.net/5keo7g2r/

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