aflösung mittels .php automatisch anpassen lassen

Jump to last post
regex

regex

Neu angemeldet
Registriert
24 Nov. 2014
Beiträge
48
hallo,

ich habe ein matrix code in einer .php datei und funktioniert soweit so wie es sein soll

[src=php]<body style=margin:0><canvas id=q /><script>var q=document.getElementById('q'),s=window.screen,w=q.width=s.width,h=q.height=s.height,p=Array(256).join(1).split(''),c=q.getContext("2d"),m=Math;setInterval(function(){c.fillStyle="rgba(0,0,0,0.05)";c.fillRect(0,0,w,h);c.fillStyle="rgba(0,255,0,1)";p=p.map(function(v,i){r=m.random();c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);v+=10; return v>768+r*1e4?0:v})},33)</script>[/src]


leider habe ich jetzt das problem, das beim aufrufen des .php im Browser doch irgendwie nicht die auflösung automatisch anpasst? rechts und unten kanten (siehe bild)


Unbenannt.png



wie kann ich das problem beheben? bzw. wie kann ich es so einstellen das für jede auflösung sich automatisch anpasst und die leeren kanten selber vollständig befüllt?



danke
 
mit .php hat das erst mal nicht so viel zu tun... - also das was du oben gepostet hast.
Man könnte die Auflösung des Browsers durchaus vorher auslesen und den Sourcecode passend ausgeben das die Auflösung passt - aber dann skaliert das ganze nicht mit wenn der Anwender das Browserfenster ändert. PHP wird ja Serverseitig beim Aufruf der Seite ausgeführt und nur das Ergebnis wird zum Anwender geschickt.

Kannst du mal den ganzen Code deiner Testseite schicken? Theo. wird in dem javascript-code oben schon die Bildschirmbreite / höhe ausgelesen...
 
Einfachste Möglichkeit: Per css beim body den overflow auf hidden stellen. Dann hast du keine Balken mehr.
 
GameChamp98 schrieb:
Einfachste Möglichkeit: Per css beim body den overflow auf hidden stellen. Dann hast du keine Balken mehr.
Zum Vergrößern anklicken....

Ist grade bei Canvas Objekten nicht der optimalste Weg, weil große Canvas Flächen auf älteren Rechnern gerne zu ruckeln beginnen.

Das Problem bei deinem Code ist, dass du window.screen.width als Breite verwendest. Das ist die Breite deines gesamten Bildschirms, nicht nur die des Browserfensters. Gleiches Problem bei der Höhe.

Hier eine Version, die keine Scrollbars zeigen sollte und auch beim Resizen des Screens angepasst wird.
Der Code läuft in aktuellen Firefox und Chrome Versionen. Für ältere Internet Explorer
You do not have permission to view link please Anmelden or Registrieren
.


[src=javascript]
<html>
<body style="margin:0;">

<canvas id="q" style="background-color:#000;"/>

<script>

var q = document.getElementById('q'),
s = window.screen,
w = q.width = window.innerWidth,
h = q.height = window.innerHeight,
p = Array(256).join(1).split(''),
c = q.getContext("2d"),
m = Math;

window.onresize = function(event)
{
w = q.width = window.innerWidth;
h = q.height = window.innerHeight;
};

setInterval(function()
{
c.fillStyle="rgba(0,0,0,0.05)";
c.fillRect(0,0,w,h);
c.fillStyle="rgba(0,255,0,1)";
p=p.map(function(v,i)
{
r=m.random();
c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);
v+=10;
return v > 768 + r * 1e4 ? 0 : v;
})
},33)

</script>
</body>
</html>
[/src]

--- [2015-02-24 14:07 CET] Automatisch zusammengeführter Beitrag ---

Wegen deiner Frage zu Fullscreen Modus, schau dir den Code hier einmal an:

http://t3n.de/news/fullscreen-api-funktioniert-363613/
 
Zuletzt bearbeitet:
Jop, das Problem ist die Verwendung von screen.width etc. Die Browser speichern leider die innere Client-Größe in unterschiedlichen Objekten im Dokument-Baum. Wenn Du das browserkompatibel machst, klappts.

Quick & dirty:
[src=javascript]function detectScreenSize(){
if(window.innerHeight && window.scrollMaxY){ // Firefox
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
}
else if(document.body.scrollHeight && document.body.offsetHeight){ // all but Explorer Mac
screenWidth = document.body.clientWidth;
screenHeight = document.body.clientHeight;
}
else{ // Explorer 6 Strict, Mozilla (not FF) and Safari
screenWidth = document.body.clientWidth;
screenHeight = document.body.clientHeight;
}
}[/src]
 
Hinter dem Link im Posting weiter oben ist eine Kurzvariante von diesem Ansatz, die ich auch ganz cool find:

[src=javascript]
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
[/src]
 
You do not have permission to view link please Anmelden or Registrieren
document.documentElement.clientWidth wäre dann NULL bzw. das Javascript Equivalent dazu wenn window.innerWidth gesetzt ist, oder?
 
You do not have permission to view link please Anmelden or Registrieren
Ja, wenn es eine Member Variable nicht gibt, dann bekommst du "undefined" zurück. "null" gibt es auch noch, "NULL" versteht JS aber nicht.

Alle richtigen Browser kennen window.innerWidth und liefern einen Wert zurück. Der Internet Explorer (< Version 9) tut das nicht. Da kennen Versionen <= 8 document.documentElement.clientWidth bzw. document.body.clientWidth. Microsoft war halt nie ein Mitläufer und macht seine eigenen Standards ;)

Um auch mit alten Seiten, die extra für IE optimiert wurden, kompatibel zu sein, unterstützen die meisten anderen Browser dann auch die Microsoft Un-Standards

[src=javascript]var x = undefined || null || "AAA";
//x == "AAA"[/src]
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben