onderka.com

Might be Gefrickel, but WorksForMe™

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

Stefan 2005-2024

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!

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 und Netzwerk'

Permalink CC BY-NC 4.0 DEED 4547 5 28.04.2021 28.04.2021