krisauseu
Jan 02, 2022
view2242
view14
0
Goto Top

Frage zu Canvas bzw. HTML5

GermanQuestionHTMLDevelopment
Hallo,

hoffentlich die richtige Abteilung gewählt..

Was muss ich denn auf meinem vServer neben Apache, MySQL und PHP noch installieren, damit das hier funktioniert:

https://codepen.io/dudleystorey/pen/NbNjjX

Sowohl unter LAMP / Ubuntu 20.04
oder
nginx
will es nicht.. any idea?

Gruß, Kris
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 1681246937

Url: https://administrator.de/contentid/1681246937

Printed on: April 24, 2024 at 17:04 o'clock

14 Comments
Latest comment
Goto Top
Member: MirkoKR
MirkoKR Jan 02, 2022 at 10:25:51 (UTC)
Goto Top
Hi.

Auf Anhieb sehr ich keine externen Abhängigkeiten, außer das du die htmL ausliefern musst...

und im <head> derselben die CSS- und die JS- Datei einbinden musst.

.
Member: KrisAusEU
KrisAusEU Jan 02, 2022 at 10:41:23 (UTC)
Goto Top
Danke... und was mache ich da falsch? sorry, bin Anfänger..

<!DOCTYPE html>
<html lang="en-US">  

<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>Today's Date</title>  
<link rel="stylesheet" href="style.css">  
<script src="script.js"></script>  
</head>

<body>


<div id="text">  
  <h1>xyz.IT</h1>
</div>
</body>
<script src="script.js"></script>  
</html>
<canvas id="canvas"></canvas>
Member: EliteHacker
EliteHacker Jan 02, 2022 updated at 11:00:26 (UTC)
Goto Top
Das sieht nach einer reinen Javascript-Awendung aus.

Dafür brauchst du weder PHP noch MySQL.
Du brauchst nur Apache. Eigentlich nicht mal das. Ein Webbrowser würde komplett reichen.

Wir wissen nicht mal, ob der Webserver überhaupt korrekt läuft.

Was du falsch machst?

Drück mal im Webbrowser auf deiner HTML-Seite F12 und lies mal was dort in der Entwicklerkonsole steht.
Member: KrisAusEU
KrisAusEU Jan 02, 2022 at 11:13:59 (UTC)
Goto Top
Zitat von @EliteHacker:
Das sieht nach einer reinen Javascript-Awendung aus.

korrekt

Dafür brauchst du weder PHP noch MySQL.
Du brauchst nur Apache. Eigentlich nicht mal das. Ein Webbrowser würde komplett reichen.

scheinbar nicht

Wir wissen nicht mal, ob der Webserver überhaupt korrekt läuft.

Was du falsch machst?

Drück mal im Webbrowser auf deiner HTML-Seite F12 und lies mal was dort in der Entwicklerkonsole steht.

siehe Foto.. und was soll ich da lesen ?
screenshot 2022-01-02 120953
Member: wiesi200
wiesi200 Jan 02, 2022 at 11:14:10 (UTC)
Goto Top
Hallo, das ist ne reine Javascript Anwendung.
Theoretisch brauchst du dafür garnichts.
nicht mal nen Webserver.
Da alles vom Browser aus gemacht wird Start mal den Entwickler Modus vom Browser und schau was der sagt. Ist die F12 Taste
Member: wiesi200
wiesi200 Jan 02, 2022 at 11:16:26 (UTC)
Goto Top
Zitat von @KrisAusEU:

Zitat von @EliteHacker:
Das sieht nach einer reinen Javascript-Awendung aus.

korrekt

Dafür brauchst du weder PHP noch MySQL.
Du brauchst nur Apache. Eigentlich nicht mal das. Ein Webbrowser würde komplett reichen.

scheinbar nicht

Wir wissen nicht mal, ob der Webserver überhaupt korrekt läuft.

Was du falsch machst?

Drück mal im Webbrowser auf deiner HTML-Seite F12 und lies mal was dort in der Entwicklerkonsole steht.

siehe Foto.. und was soll ich da lesen ?

Flasche Registerkarten.
Member: MirkoKR
MirkoKR Jan 02, 2022 at 11:19:44 (UTC)
Goto Top
Vergleiche deinen Quelltext nochmal!
Warum steht <canvas> außerhalb?

und warum 2x Script.js ?

.
heart1
Member: canlot
canlot Jan 02, 2022 at 11:38:54 (UTC)
Goto Top
Hi, ich habe das mal für dich debuggt.
Also wenn ich das so ausführe bekomme ich mit den debugtools eine Fehlermeldung:
<html>
	<head>
		<link rel="stylesheet" href="style.css">  
		<script src="script.js"></script>  
	</head>
	<body>
	<canvas id="canvas"></canvas>  
	<div id="text">  
	  <h1>Everything Connects</h1>
	</div>
	</body>
</html>
2022-01-02 12_34_37-index.html

2022-01-02 12_35_29-index.html

Das Problem ist, dass das Script vor dem existieren der canvas Box mit der id canvas geladen wird.
Deswegen wird es abgebrochen weil die Box nicht gefunden werden kann.
Wenn aber das Script nach dem Erzeugen der Box geladen wird, funktioniert alles einwandfrei.

<html>
	<head>
		<link rel="stylesheet" href="style.css">  
		
	</head>
	<body>
	<canvas id="canvas"></canvas>  
	<div id="text">  
	  <h1>Everything Connects</h1>
	</div>
	<script src="script.js"></script>  
	</body>
</html>
heart1
Member: KrisAusEU
KrisAusEU Jan 02, 2022 at 11:39:04 (UTC)
Goto Top
Zitat von @MirkoKR:

Vergleiche deinen Quelltext nochmal!
Warum steht <canvas> außerhalb?

eins davon war es face-smile wahrscheinlich <canvas> muss innerhalb <head>.. DANKE !!!!
Member: KrisAusEU
KrisAusEU Jan 02, 2022 at 11:43:38 (UTC)
Goto Top
Zitat von @canlot:

Hi, ich habe das mal für dich debuggt.


oder innerhalb <body>
Member: KrisAusEU
KrisAusEU Jan 02, 2022 at 11:48:13 (UTC)
Goto Top
und wo müsste ich nun was in der index.html einfügen, um ein Hintergrundbild drüber oder drunter zu legen? oder geht das nicht?

ihr könnt auch ruhig gucken, mach ich gleich eh neu:

http://165.22.70.238/
Member: wiesi200
wiesi200 Jan 02, 2022 at 11:50:45 (UTC)
Goto Top
So in etwa.
https://www.w3schools.com/html/html_images_background.asp
Member: MirkoKR
MirkoKR Jan 02, 2022 at 11:56:58 (UTC)
Goto Top
Also du hast gerade angefangen zulernen?

Dann am Besten nach "HTML CSS JS Tutorials" googlen oder direkt bei YouTube...

Hintergrundbilder z.B. kannst du auf verschiedene Weise einblenden, HTML, CSS oder js ...

In Tutorials lernst du das Schritt für Schritt und auch, warum im obigen Beispiel der z.B. <canvas> aufgebaut sein muss, bevor das Script ja damit arbeiten kann.
Auch der Zusammenhang zwischen HTML und CSS wird dort gut erklärt, insbesondere die Abhängigkeit von z.B. Reihenfolgen der Objekte ...

Jede einzelne Frage hier zu stellen, wird dich nicht glücklich machen ;- )

Gute Tutorials gibt es z.B. auch bei Udemy.com - kostet aber, hier auf Rabattaktion ca. 10 bis 13 Euro pro Kurs achten.


Viel Erfolg!
Member: KrisAusEU
KrisAusEU Jan 02, 2022 at 11:58:30 (UTC)
Goto Top
Ich bin halt zufällig auf diese Seite gekommen, das spartanische Design gefällt mir extrem gut.. das ist aber glaub ich Wordpress..

https://gerlich.it/

achso, ich mache keine öffentliche Homepage.. nur LAN privat, evtl. VPN für Familie.
GermanQuestionHTMLDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments