Onderka.net

Might be Gefrickel, but WorksForMe™

Suche (S)
Inhaltsverzeichnis (I)
Impressum & Kontakt (K)

Stefan 2002-2026

Infrastructure

HTML5-Canvas mit Partikeln und Hintergrundbild



Diese Seite wurde vor mehr als 2 Jahren erstellt und vor über einem Monat zuletzt bearbeitet. Eventuell ist längst ihr Mindesthaltbarkeitsdatum überschritten!

Stacked/layered <canvas> mit Bild im Hintergrund

Alles zusammen liegt auch auf CodePen und JSfiddle.

Für die Fehlerseite von gameart.onderka.com musste ein funktionierender Quake-Teleporter her. Es ist 2021. Ein animiertes gif ist uncool, Flash kann ich nicht (ha ha ...) — also dann HTML5:

Your browser does not support the canvas element. You're really old school!
<style> .teleporterwrapper { width: 100%; margin: 0 auto; padding: 20px; overflow-x: auto; } #canvas_wrapper { position: relative; margin: 10px auto; width: 640px; /* Full size */ height: 480px; /* Full size */ } #teleporter_canvas { position: absolute; top: 0; /* Full size */ left: 0; /* Full size */ border: 0; width: 640px; /* Full size */ height: 480px; /* Full size */ } #particle_canvas { position: absolute; top: 79px; /* Offset */ left: 242px; /* Offset */ border: 0; width: 169px; /* Portal area */ height: 316px; /* Portal area */ } </style> <script> /* Init teleporter */ var canvas = document.getElementById("teleporter_canvas"), ctx = canvas.getContext("2d"); canvas.width = 640; canvas.height = 480; var background = new Image(); background.src = "/computer-und-netzwerk/html5-canvas-mit-partikeln-und-hintergrundbild/teleporter.png"; /* Set background onload() */ background.onload = function(){ ctx.drawImage(background,0,0); } function use_teleporter() { }; </script> <script src='/computer-und-netzwerk/html5-canvas-mit-partikeln-und-hintergrundbild/particles.min.js'></script>

HTML

<div id='canvas_wrapper' class='center shadow'>
    <canvas id="teleporter_canvas" width="640" height="480">
    Your browser does not support the canvas element. You're really old school!<br />
    <a href='/'><img class='center shadow' src='/images/teleporter.jpg'></a>
    </canvas>
    <a href='/'><canvas id="particle_canvas" width="240" height="280"></canvas></a>
</div>

CSS

Das CSS dazu: 2 absolut platzierte <canvas>-Elemente in einem Wrapper

#canvas_wrapper {
    position: relative;
    width: 640px;  /* Full size */
    height: 480px; /* Full size */
}

#teleporter_canvas {
    position: absolute;
    top: 0;        /* Full size */
    left: 0;       /* Full size */
    border: 0;
    width: 640px;  /* Full size */
    height: 480px; /* Full size */
}

#particle_canvas {
    position: absolute;
    top: 79px;     /* Offset */
    left: 242px;   /* Offset */
    border: 0;
    width: 169px;  /* Portal area */
    height: 316px; /* Portal area */
}

Layer 1: Hintergrund

Die Hintergrund-Bilder, 640×480 Pixel:

Das Javaskript zum Initialisieren des Hintergrunds onload():

/* Init teleporter */
var canvas = document.getElementById("teleporter_canvas"),
ctx = canvas.getContext("2d");
canvas.width   = 640;
canvas.height  = 480;
var background = new Image();
background.src = "https://gameart.onderka.com/images/teleporter.png";
/* Set background onload() */
background.onload = function(){
    ctx.drawImage(background,0,0);
}

Layer 2: Partikel

JS geborgt von @nikitindiz auf CodePen:

Die Bilder (.jpg/.png), das CSS und die Skripte sind an vielen Stellen aufeinander abgestimmt: Sowohl die Abmessungen des Wrappers als auch der Offset (242px/79px) und die Größe (169px/316px) der Partikel-<canvas> innerhalb des Wrappers.


24 andere Seiten unter 'Computer & Netzwerk'

Permalink CC BY-NC 4.0 DEED 7699 5 28.04.2021 28.04.2021