は、どのように私は、キャンバス上でズームするのですか？

Question

だから私は、JavascriptとHTML5にかなり新たなんだ、と私はキャンバス上でズームする方法を把握しようとしています。のは、私のjavascriptのコードは次のようになりましょう：

window.addEventListener('load', function() { 
      var theCanvas = document.getElementById('myCanvas'); 
      theCanvas.style.border = "black 1px solid"; 
      if(theCanvas && theCanvas.getContext) { 
       var context = theCanvas.getContext('2d'); 

       if(context) { 
        var x = 10; 
        var y = 10; 
        var z = 255; 
        var color = "rgb(0," + z + ",0)"; 
        context.fillStyle = "rgb(100,0,0)"; 
        for(var y = 0; y <= 290; y += 10) { 

         for(var x = 0; x <= 290; x += 10) { 
          if(z >= 1) { 
           z -= 1; 
          } 
          color = "rgb(0," + z + ",0)"; 

          if(x % 20 === 0) { 
           context.fillStyle = color; 
          } else { 
           context.fillStyle = color; 
          } 
          context.fillRect(x, y, 10, 10); 
         } 
        } 

       } 

      } 
     }, false); 

要約すると、このコードは、単に色を変えるのタイル張りの長方形でキャンバスを埋めます。しかし、どのように1は、このような何かに内とズームアウトに行きますか？

Answer 1

あなたはcontextのscale方法をお勧めします。

そして、あなたはキャンバスに何かを描画した後、それは本当にズームや拡大縮小することができない、ということに注意してください - あなたは、新たな「ズームレベル」での再描画キャンバス全体に持っています。