drawImage()实现

时间:2013-02-05 01:06:08

标签: javascript jquery html5 canvas

我有两幅不同尺寸的画布。我的目标是将用户的绘图从主画布复制到第二个画布作为缩小版本。到目前为止,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);
});

如果需要,我可以包含更多代码。我也意识到规模不断被召唤;这就解释了为什么新复制的图像每次都会变小,这可能是另一个问题。

1 个答案:

答案 0 :(得分:1)

实际上很简单,你正在使用所谓的变换(平移,旋转或缩放)。

每次必须保存并恢复画布状态时,为了“新鲜”地使用它们。

$('#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();

});

同样重要的是要注意你可以在调用恢复之前多次按下,以便使用递归函数等执行许多很酷的几何技巧......

看一下状态和变换的这种解释: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Transformations

希望这有助于您更好地理解画布变换。