die Lösung: automatische Skalierung mit CSS und JavaScript

Der Schlüssel liegt in einer Kombination von CSS und JavaScript:

1. javaScript :

   • in deiner Zeichnungsfunktion, passen Sie die breit und die Höhe der aktuellen Fenstermessungen an. var ctx = (Ihr Canvas -Kontext); ctx.canvas.width = window.innnerwidth; ctx.canvas.height = window.innerHeight; // Code hier zeichnen ... }

     function draw() {
       var ctx = (your canvas context);
       ctx.canvas.width = window.innerWidth;
       ctx.canvas.height = window.innerHeight;
       // Drawing code here...
     }

CSS
2. :
   Define the CSS for the and its container:

   • html, body { Breite: 100%; Höhe: 100%; Rand: 0; }

     html, body {
       width: 100%;
       height: 100%;
       margin: 0;
     }

   indem die HTML- und Körperelemente auf die volle Breite und Höhe festgelegt werden, ist die eingeschränkt, in das Fenster zu passen. Das Skript passt seine Größe dynamisch an, um jederzeit eine perfekte Passform zu gewährleisten.