image - 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 宽度/高度属性缩放整个画布，这样就可以缩放图像而无需重绘它.