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

【问题标题】：HTML5 canvas, scale image after drawing itHTML5画布，绘制后缩放图像
【发布时间】：2012-12-16 16:32:17
【问题描述】：

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

      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);

我该怎么办？

【问题讨论】：

标签： image html canvas scale

【解决方案1】：

你想错了。一旦您将图像绘制到canvas 上，它就与imageObj 对象没有任何关系。你对imageObj 所做的任何事情都不会影响已经绘制的内容。如果要缩放图像，请在drawImage function：

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

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

【讨论】：

我找到了一个使用 Kinetic 库和 transitionTo() 方法的解决方案

【解决方案2】：

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

【讨论】：

好吧，我无法缩放整个画布，因为其中还有其他我不想缩放的对象。我想在初始屏幕上显示一个徽标，该徽标应自行旋转并缩放到其原始大小。
谢谢你的回答对我有帮助！！