web-dev-qa-db-ja.com

HTML5キャンバス、描画後に画像を拡大縮小する

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

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

どうすればいいですか？

imagehtml5canvasscale
9
Mich Dart

あなたはそれについて間違って考えています。画像をcanvasに描画すると、imageObjオブジェクトとは関係がなくなります。 imageObjに対して何をしても、すでに描画されているものには影響しません。画像を拡大縮小する場合は、 drawImage function ：で実行します。

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

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

22
robertc

Robertcの言うことは正しいですが、本当にキャンバス上で画像を拡大縮小したい場合after何らかの理由で画像を描画する場合は、CSSの幅/高さのプロパティを使用してキャンバス全体を拡大縮小できます。再描画せずに画像。

3
hobberwickey