canvas宽高改变后，画布上的内容消失了

最新推荐文章于 2023-04-18 11:03:22 发布

原创最新推荐文章于 2023-04-18 11:03:22 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

canvas 同时被 2 个专栏收录

2 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

当canvas元素的宽高被调整时，原有的内容会被清除。为了解决这个问题，我们可以利用getImageData和putImageData方法来保存和恢复画布内容。首先，获取canvas的初始数据，然后改变canvas的尺寸，最后将保存的数据放回新的画布区域，从而实现内容的重绘。这种方法在动态调整canvas大小时非常有用。

当你有个某种需求，需要改变canvas宽高时，你会发现，画布上的内容没了，这是因为canvas的大小改变后会自动清除内容的，这时候我们需要重新绘制画布。

未改变宽高前的canvas

 		var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(500, 100);
        ctx.lineTo(500, 400);
        ctx.lineTo(100, 400);
        ctx.lineWidth = 8;
        ctx.strokeStyle = "red";
        ctx.closePath();
        ctx.stroke();

改变后的canvas，重绘

注：使用getImageData方法先保存画布，然后使用putImageData方法，将保存的数据放回画布；

		var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(100, 100);
        ctx.lineTo(500, 100);
        ctx.lineTo(500, 400);
        ctx.lineTo(100, 400);
        ctx.lineWidth = 8;
        ctx.strokeStyle = "red";
        ctx.closePath();
        ctx.stroke();
        setTimeout(resize, 2000);//  2秒后重新绘制, 看清变化

        function resize(){
            let canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);  // 保存画布
            canvas.width = "1000";
            canvas.height = "1000";
            ctx.putImageData(canvasData, 200, 200);  //  改变完宽高后，重绘画布
        }

结尾处，欢迎交流学习，纠错。