Wie zoome ich auf einer Leinwand?

Question

Also ich bin ziemlich neu in Javascript und HTML5, und ich versuche herauszufinden, wie auf einer Leinwand zu zoomen. Lassen Sie uns sagen, mein Javascript-Code wie folgt aussieht:

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

Zusammengefasst dieser Code füllt nur die Leinwand mit Fliesenrechtecke von Farbe zu ändern. Aber wie sollte man so etwas vergrößern und verkleinern?

Answer 1

Sie möchten die scale-Methode von context.

Sobald Sie etwas auf die Leinwand gezeichnet haben, kann es nicht wirklich gezoomt oder skaliert werden - Sie müssen die gesamte Leinwand auf der neuen "Zoomstufe" neu zeichnen.