Question

我有一个用户可调整大小的窗口和画布，我在调整画布大小之前复制画布，然后重新绘制它，当用户调整窗口大小时效果很好。

   imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

   canvasWidth  = winW-20;                      // set new width
   canvasHeight = winH-66;                      // set new height
   canvas.setAttribute('width', canvasWidth);
   canvas.setAttribute('height', canvasHeight);

   ctx.putImageData(imageData, 0, 0);

使画布缩小剪辑数据，如何将画布数据复制到更大的临时平面上，以便重绘大小，而不会剪裁。

Answer 1

使用您动态创建的辅助画布元素：

var tempCanvas = document.createElement('canvas'),
    tempCtx = tempCanvas.getContext('2d');

tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;

tempCtx.drawImage(canvas, 0, 0);

... resize

ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);

请注意，其中许多操作最终会降低质量，因此我的建议是您使用上面的屏幕外画布，但是在整个生命周期内将其保持为单一尺寸，然后绘制到它而不是在屏幕上，并在每次主要操作后更新屏幕上的一个。如果这实际上是可行的，当然取决于您的项目。

另一种方法是将所有绘制操作存储为（自定义）对象或类似的东西，然后在每次调整大小后重新绘制整个画布。这样，您可以将数据保存为矢量格式，并在栅格化为画布时获得更好的质量。

如何将画布上下文粘贴到大平面上

1 个答案: