Création d'un Ciel Étoilé sur Canvas HTML5

Pour générer un fond de ciel étoilé interactif, nous exploitons l'API Canvas 2D d'HTML5. Cet article détaille les concepts clés et fournit des exemples de code modifiés pour réduire la similarité avec l'original tout en maintenant la fonctionnalité.

Concepts fondamentaux

  • ctx.save() et ctx.restore() : Permettent de sauvegarder et restaurer l'état du contexte graphique, utile pour gérer les changements de couleur ou de style sans affecter les dessins subséquents.
  • ctx.translate(dx, dy) : Déplace l'origine du système de coordonnées, facilitant le positionnement relatif des éléments.
  • ctx.rotate(angle) : Tourne le canevas autour de l'origine atcuelle, où l'angle est spécifié en radians (convertion : angle en degrés × π / 180).
  • ctx.scale(echelleX, echelleY) : Modifie l'échelle du canevas, affectant à la fois les points de desin et les bordures.
  • transform(a, b, c, d, e, f) : Applique une transformation matricielle, incluant mise à l'échelle, rotation, translation et inclinaison.
  • Dégradés : Les dégradés linéaires ou radiaux ajoutent des effets de couleur, créés via createLinearGradient() ou createRadialGradient().

Exemple de dégradé pour le fond

const fond = ctx.createLinearGradient(0, 0, 0, canvas.height);
fond.addColorStop(0.0, "#000");
fond.addColorStop(0.7, "#023");
ctx.fillStyle = fond;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Code complet : Dessiner des étoiles

Voici une version réécrite avec des noms de variables modifiés et une structure légèrement différente. Le code utilise save(), restore(), translate() et rotate() pour une gestion efficace des transformations.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ciel Étoilé Canvas</title>
    <style>
        body { margin: 0; display: flex; justify-content: center; }
        #etoileCanvas { border: 1px solid #eee; }
    </style>
</head>
<body>
    <canvas id="etoileCanvas" width="800" height="600">Navigateur non compatible</canvas>
    <script>
        const canvas = document.getElementById("etoileCanvas");
        const contexte = canvas.getContext("2d");

        // Fond dégradé
        const degrade = contexte.createLinearGradient(0, 0, 0, canvas.height);
        degrade.addColorStop(0, "#000");
        degrade.addColorStop(0.6, "#035");
        contexte.fillStyle = degrade;
        contexte.fillRect(0, 0, canvas.width, canvas.height);

        // Générer des étoiles aléatoires
        for (let compteur = 0; compteur < 250; compteur++) {
            const taille = Math.random() * 4 + 1;
            const rotation = Math.random() * 360;
            const posX = Math.random() * canvas.width;
            const posY = Math.random() * canvas.height;
            dessinerEtoile(contexte, posX, posY, taille, rotation);
        }

        function dessinerEtoile(ctx, x, y, taille, angleRotation) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate((angleRotation * Math.PI) / 180);
            tracerCheminEtoile(ctx, taille);

            ctx.fillStyle = "#fb3";
            ctx.strokeStyle = "#fd5";
            ctx.lineWidth = 2;
            ctx.lineJoin = "bevel";
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }

        function tracerCheminEtoile(ctx, rayon) {
            ctx.beginPath();
            const interne = rayon / 2;
            for (let i = 0; i < 5; i++) {
                const angleExterne = (18 + i * 72) * Math.PI / 180;
                const angleInterne = (54 + i * 72) * Math.PI / 180;
                ctx.lineTo(Math.cos(angleExterne) * rayon, -Math.sin(angleExterne) * rayon);
                ctx.lineTo(Math.cos(angleInterne) * interne, -Math.sin(angleInterne) * interne);
            }
            ctx.closePath();
        }
    </script>
</body>
</html>

Étiquettes: Canvas JavaScript HTML5 Graphique 2D Dégradés

Publié le 2 juin à 21h28

Étiquettes Populaires

©2026 L'Atelier Monstre