Javascript drawImage（）实现

我有两张不同尺寸的画布。我的目标是将用户的图形作为缩小版本从主画布复制到第二个画布。到目前为止，drawImage（）和scale似乎正常工作，但第二个画布保留了主图形的旧版本和新副本。每次调用drawImage（）之前，我都试图清除它，但这似乎没有任何作用。如何在每次函数运行时仅将当前图像复制到辅助画布

$('#hand').dblclick(function(){
 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 //var imageData = context.getImageData(0, 0, 100, 100);
 var newCanvas = document.getElementById('scaledCanvas');
 var destCtx = newCanvas.getContext('2d');
 destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
 destCtx.scale(.5,.5);
 destCtx.drawImage(canvas, 0, 0);
});

---

如果需要，我可以包含更多代码。我还刚刚意识到，scale不断被调用；这就解释了为什么新复制的图像每次都会变小，因此这可能是另一个问题。

其实很简单，您使用的是所谓的变换（平移、旋转或缩放）

为了每次都“新鲜”地使用它们，您必须每次都保存和恢复画布状态

$('#hand').dblclick(function(){
 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 //var imageData = context.getImageData(0, 0, 100, 100);
 var newCanvas = document.getElementById('scaledCanvas');
 var destCtx = newCanvas.getContext('2d');
 destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);

 //save the current state of this canvas' drawing mode
 destCtx.save();

 destCtx.scale(.5,.5);
 destCtx.drawImage(canvas, 0, 0);

 //restore destCtx to a 1,1 scale (and also 0,0 origin and 0 rotation)
 destCtx.restore();

});

还需要注意的是，在调用restore之前，您可以推几次，以便使用递归函数等执行许多很酷的几何技巧

请看下面对状态和转换的解释：

希望这能帮助您更好地理解画布变换