

現在JavaScriptを使用しお絵かきソフトを作成しています。  
そこで拡大縮小機能を作りたいのですがうまく行きません。  
下記コードです

[code]

    function zoom(x, y)
    {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width = canvas.width;
        var height = canvas.height;
    
        var ImageData = ctx.getImageData(0, 0, width, height);
    
        ctx.setTransform(x, 0, 0, y, 0, 0);
    
        ctx.putImageData(ImageData, 0, 0);
    }
    
[/code]

zoom関数のxとyを任意に変えて変更しているのですが、うまくいきません。  
倍率を変更した後に、`drawImage`などを使用して画像を張り付けてみたら指定した倍率になっていました。  
`getImageData`や`putImageData`ではできないのでしょうか？  
倍率変更方法は色々あるようですが、今後の作りに合わせて`setTransform`を使いたいです。

なぜうまくできないのでしょうか？

分かる方、アドバイスやご指摘をお願い致します。


CC BY-SA 3.0
2017-11-15T01:57:04.590
39582
2019-09-02T13:01:10.117
2017-11-15T02:24:25.120
5519
26197
question
javascript html
CanvasのsetTransformを使用する拡大縮小について


canvasのコンテキストのsetTransformを使用するのではなく。  
cssのtransformを使用しcanvas自体のサイズを大きくしました。  
見える範囲を決め、のoverflow: hiddenを設定する事で実現できました。

ここを参考にしました。  
<http://am-yu.net/2014/04/13/canvas-pbbs-expansion/>


CC BY-SA 3.0
2017-11-16T01:48:41.500
39605
2017-11-16T01:48:41.500
26197
39582
answer