11

既にキャンバスに描画されている画像を拡大縮小しようとしています。これはコードです：

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

どうすればいいですか？

4

2 に答える 2

26

あなたはそれについて間違って考えています。画像を に描画すると、オブジェクトcanvasとは何の関係もありません。imageObjあなたが何をしても、imageObjすでに描かれているものには影響しません。画像をスケーリングする場合は、drawImage関数で次のことを行います。

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

スケーリングをアニメーション化する場合、または最初にフル サイズで画像を描画する必要があるその他の効果を達成しようとしている場合は、縮小された画像を描画する前にまずそれをクリアする必要があります。

于 2012-12-16T17:21:10.490 に答える
5

robertcの言うことは正しいですが、何らかの理由でキャンバス上で画像を描画した後に実際に拡大縮小したい場合は、CSSの幅/高さのプロパティを使用してキャンバス全体を拡大縮小するだけで、再描画することなく画像を拡大縮小できます.

于 2012-12-17T06:22:31.047 に答える