HTML5画布，绘制后绘制缩放图像

Question

我试图缩放已经绘制到画布中的图像。 这是代码：

 var canvas = document.getElementById('splash-container'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     // draw image at its original size 
     context.drawImage(imageObj, 0, 0); 
     }; 
     imageObj.src = 'images/mine.jpeg'; 


     // Now let's scale the image. 
     // something like... 
     imageObj.scale(0.3, 0.3); 

我该怎么办？

Answer 1

你在考虑错误。将图像绘制到canvas后，它与imageObj对象没有任何关系。您对imageObj所做的任何操作都不会影响已绘制的内容。如果要缩放图像，请在drawImage function：

drawImage(imgObj, 0, 0, imgObj.width * 0.3, imgObj.height * 0.3) 

如果你想动画缩放或正在寻求实现，这就需要你画在全尺寸图像最初你有一些其他影响在绘制按比例缩小的图像之前先到clear it。

Answer 2

什么robertc说是正确的，但如果你真的想要在画布上缩放图像由于某种原因绘制它，你可以使用CSS的宽度/高度属性缩放整个画布，图像，而不必重绘它。