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

函数中进行操作:

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

如果您想要动画缩放或希望实现一些其他效果，需要您最初以全尺寸绘制图像，则必须先清除它，然后再绘制缩小的图像。

Answer 2

robertc 所说的是正确的，但如果你真的想在画布上缩放图像之后出于某种原因绘制它，你可以使用 CSS 宽度/高度属性缩放整个画布，这样就可以缩放图像而无需重新绘制它。