Zeichnen mit Javascript

1 Pluspunkt 0 Minuspunkte
Wie kann ich mit Javascript einfache geometrische Figuren zeichnen?
von  

3 Antworten

1 Pluspunkt 0 Minuspunkte

Eine gängige Methode ist die Verwendung des sogenannten HTML5 Canvas-Elements.

<html>
<head>
    <title>Zeichnen mit Inline JavaScript</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // Kreis zeichnen
        context.beginPath();
        context.arc(100, 100, 50, 0, 2 * Math.PI);
        context.strokeStyle = "blue";
        context.fillStyle = "yellow";
        context.lineWidth = 2;
        context.stroke();
        context.fill();
        context.closePath();

        // Rechteck zeichnen
        context.beginPath();
        context.rect(150, 150, 100, 50);
        context.fillStyle = "green";
        context.fill();
        context.closePath();

        // Linie zeichnen
        context.beginPath();
        context.moveTo(250, 250);
        context.lineTo(350, 250);
        context.strokeStyle = "red";
        context.lineWidth = 3;
        context.stroke();
        context.closePath();

        // Dreieck zeichnen
        context.beginPath();
        context.moveTo(400, 400);
        context.lineTo(450, 300);
        context.lineTo(350, 350);
        context.closePath();
        context.strokeStyle = "purple";
        context.fillStyle = "orange";
        context.lineWidth = 2;
        context.stroke();
        context.fill();
    </script>
</body>
</html>
von  
0 Pluspunkte 0 Minuspunkte

Das HTML-Element SVG (Scalable Vector Graphics) nutzt verschiedene Unterlemente wie <circle>, <rect>, <line> und <polygon>, um die verschiedenen Formen zu zeichnen. Die Attribute wie cx, cy, r, x, y, width, height, x1, y1, x2, y2 usw. werden verwendet, um die Positionen und Abmessungen der Formen festzulegen.

<!DOCTYPE html>
<html>
<head>
    <title>Zeichnen mit SVG</title>
</head>
<body>
    <svg width="500" height="500">

        <!-- Kreis -->
        <circle cx="100" cy="100" r="50" stroke="blue" fill="yellow" stroke-width="2" />

        <!-- Rechteck -->
        <rect x="150" y="150" width="100" height="50" fill="green" />

        <!-- Linie -->
        <line x1="250" y1="250" x2="350" y2="250" stroke="red" stroke-width="3" />

        <!-- Dreieck -->
        <polygon points="400,400 450,300 350,350" stroke="purple" fill="orange" stroke-width="2" />

    </svg>
</body>
</html>
von (716 Punkte)  
0 Pluspunkte 0 Minuspunkte

Für einfache geometrische Figuren kannst du DOM-Elemente wie <div>, <span>, etc. verwenden und ihre Positionen, Größen und Stile ändern, um Zeichnungen zu erstellen.

<html>
<head>
    <title>Zeichnen mit DOM-Elementen</title>
    <style>
        .shape {
            position: absolute;
            width: 50px;
            height: 50px;
        }
        .circle {
            border-radius: 50%;
            background-color: yellow;
        }
        .rectangle {
            background-color: green;
        }
        .line {
            border-bottom: 3px solid red;
        }
        .triangle {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 50px solid orange;
            position: absolute;
            left: 400px;
            top: 300px;
        }
    </style>
</head>
<body>
    <div class="shape circle" style="left: 100px; top: 100px;"></div>
    <div class="shape rectangle" style="left: 150px; top: 150px;"></div>
    <div class="shape line" style="left: 250px; top: 250px;"></div>
    <div class="shape triangle"></div>
</body>
</html>
von  

Ähnliche Fragen