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);  //  改变完宽高后，重绘画布
        }

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