Ich habe ein canvas-Element mit den Abmessungen 979X482px und möchte es dehnen, um es an die Breite eines beliebigen Browserfensters anzupassen, wobei das Seitenverhältnis von Breite / Höhe 1 zu 1 beibehalten wird zur Breite der Leinwand. Irgendwelche Vorschläge, wie man das mit javascript / jQuery macht?
Zuerst legen Sie die Breite der Leinwand auf 100% fest
%Vor%Aktualisieren Sie dann seine Höhe basierend auf seiner Breite
%Vor%2.031 = 979/482
Aber Sie sollten nicht an $ (Fenster) .resize wie ich anhängen ... es ist ein schlechtes Verhalten
oder eine Variation davon. ctx ist der Kontext. Eine if-Anweisung für Edge Cases könnte notwendig sein!
Alle vorherigen Antworten sind großartig, aber sie werden nicht alle auf der Leinwand gezeichneten Bilder proportional zur neuen Leinwandgröße skalieren. Wenn Sie kinetisch verwenden, habe ich eine Funktion hier = Ссылка
Ich spielte selbst eine Weile mit dieser Sache herum. Das Konzept dreht sich darum, die Breite der Leinwand zu kennen. Sie müssen außerdem sicherstellen, dass alle Ihre Canvas-Assets auch Berechnungen zum Buchen verwenden, abhängig vom Browser mit. Ich habe meinen Code dokumentiert, ich hoffe, es hilft,
%Vor%Tags und Links javascript html5-canvas aspect-ratio