Canvas Fullscreen 100% Ursachen verschwommen

Question

Ich bin neu bei Leinwand und versuche, ein Spiel Vollbild und wichtiger auf kleinere Bildschirme reagieren aber meine Formen kommen unscharf, als ob sie auf gezoomt wurden, das ist meine CSS und zwei JavaScript-Funktionen

canvas { 
    background: green; 
    width: 100%; 
    height: 100%; 
} 

//this function draws 
    function drawEverything() { 
     colorRect(0, 0, canvas.width, canvas.height, '#C9EEF3', "Main"); 
     colorRect(50,0,150, 35, "red","firstRow"); 

}

// this function gives the layout of the rectangels 
    function colorRect(leftX, topY, width, height, drawColor, tag) { 
     canvasContext.fillStyle = drawColor; 
     canvasContext.fillRect(leftX, topY, width, height); 
    } 

Answer 1

das ist, weil es ausgestreckt wurde.

Es ist wichtig, daran zu denken, dass eine Leinwand im Wesentlichen zwei Größen hat. Eine Größe ist die Anzahl der Pixel im "Bild", auf dem sich die Arbeitsfläche befindet. Die andere, die Sie mit Ihrem CSS oben festgelegt haben, ist die Größe, mit der der Browser das Canvas-Bild rendern wird. (Ein Canvas ist in vielerlei Hinsicht nur ein Bild, das dynamisch von JavaScript gezeichnet und nicht statisch in einer Datei gespeichert wird).

Also im Wesentlichen, was Sie getan haben, ist ein 300x150 Bild genommen und sagte dem Browser, es auf Tausende von Pixeln auszudehnen. Das wird nicht sehr gut aussehen.

Wenn Sie wirklich eine 100% dynamische Leinwand möchten, dass die Benutzer genau Bildschirm übereinstimmen, müssen Sie ihre Fenster Breite und Höhe erhalten:

var w = window.innerWidth; 
var h = window.innerHeight; 

Und dann diese Werte verwenden, um die Leinwand Größe eingestellt wie in this question.

Sie müssen auch die Höhe und Breite in Ihren Zeichnungsberechnungen verwenden, um sicherzustellen, dass Sie Objekte im richtigen Teil des Bildschirms auf die richtige Größe platzieren.

Optional können Sie die Breite und Höhe des Arbeitsbereichs für große Bildschirme auf ein akzeptables hohes Niveau einstellen und es dann zulassen, dass das Arbeitsfeld für kleinere Bildschirme verkleinert wird. Gefälschte Bilder sehen besser aus als gestreckte Bilder.