Copilot rysowanie

Jednak potrafi, co prawda niebieski ale ok.
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kształty w SVG</title>
    <style>
        .icon {
            cursor: pointer;
            margin: 10px;
        }
        #drawingArea {
            border: 1px solid black;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>Kliknij ikonę, aby narysować kształt</h1>
    <div>
        <!-- Ikony -->
        <svg class="icon" id="rectangleIcon" width="50" height="50">
            <rect width="50" height="50" fill="none" stroke="blue" />
        </svg>
        <svg class="icon" id="circleIcon" width="50" height="50">
            <circle cx="25" cy="25" r="20" fill="none" stroke="green" />
        </svg>
        <svg class="icon" id="triangleIcon" width="50" height="50">
            <polygon points="25,5 45,45 5,45" fill="none" stroke="red" />
        </svg>
        <svg class="icon" id="iBeamIcon" width="50" height="50">
            <polyline points="10,10 40,10 40,20 30,20 30,40 40,40 40,50 10,50 10,40 20,40 20,20 10,20 10,10" fill="none" stroke="orange" />
        </svg>
    </div>
    <button id="saveButton">Zapisz jako PNG</button>
    <div id="drawingArea">
        <!-- Obszar do rysowania -->
    </div>
    <script>
        function drawShape(type) {
            const width = prompt("Podaj szerokość:", 100);
            const height = prompt("Podaj wysokość:", 100);
            const svgNS = "http://www.w3.org/2000/svg";
            const drawingArea = document.getElementById("drawingArea");
            drawingArea.innerHTML = ''; // Wyczyść poprzednie rysunki
            const svg = document.createElementNS(svgNS, "svg");
            svg.setAttribute("width", 400);
            svg.setAttribute("height", 400);
            svg.setAttribute("viewBox", "0 0 400 400");

            if (type === 'rectangle') {
                const rect = document.createElementNS(svgNS, "rect");
                rect.setAttribute("x", 150);
                rect.setAttribute("y", 150);
                rect.setAttribute("width", width);
                rect.setAttribute("height", height);
                rect.setAttribute("fill", "none");
                rect.setAttribute("stroke", "blue");
                svg.appendChild(rect);
            } else if (type === 'circle') {
                const circle = document.createElementNS(svgNS, "circle");
                const radius = width / 2;
                circle.setAttribute("cx", 200);
                circle.setAttribute("cy", 200);
                circle.setAttribute("r", radius);
                circle.setAttribute("fill", "none");
                circle.setAttribute("stroke", "green");
                svg.appendChild(circle);
            } else if (type === 'triangle') {
                const triangle = document.createElementNS(svgNS, "polygon");
                const points = `200,${200 - height / 2} ${200 + width / 2},${200 + height / 2} ${200 - width / 2},${200 + height / 2}`;
                triangle.setAttribute("points", points);
                triangle.setAttribute("fill", "none");
                triangle.setAttribute("stroke", "red");
                svg.appendChild(triangle);
            } else if (type === 'iBeam') {
                const iBeam = document.createElementNS(svgNS, "polyline");
                const points = `
                    ${200 - width / 2},${200 - height / 2} 
                    ${200 + width / 2},${200 - height / 2} 
                    ${200 + width / 2},${200 - height / 4} 
                    ${200 + width / 4},${200 - height / 4} 
                    ${200 + width / 4},${200 + height / 4} 
                    ${200 + width / 2},${200 + height / 4} 
                    ${200 + width / 2},${200 + height / 2} 
                    ${200 - width / 2},${200 + height / 2} 
                    ${200 - width / 2},${200 + height / 4} 
                    ${200 - width / 4},${200 + height / 4} 
                    ${200 - width / 4},${200 - height / 4} 
                    ${200 - width / 2},${200 - height / 4}`;
                iBeam.setAttribute("points", points);
                iBeam.setAttribute("fill", "none");
                iBeam.setAttribute("stroke", "orange");
                svg.appendChild(iBeam);
            }

            drawingArea.appendChild(svg);
        }

        function saveAsPNG() {
            const drawingArea = document.getElementById("drawingArea");
            const svg = drawingArea.querySelector("svg");
            const serializer = new XMLSerializer();
            const source = serializer.serializeToString(svg);

            const img = new Image();
            img.src = 'data:image/svg+xml;base64,' + btoa(source);

            img.onload = function() {
                const canvas = document.createElement("canvas");
                canvas.width = 400;
                canvas.height = 400;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);

                const a = document.createElement("a");
                a.download = "shape.png";
                a.href = canvas.toDataURL("image/png");
                a.click();
            };
        }

        document.getElementById("rectangleIcon").onclick = function() { drawShape('rectangle'); };
        document.getElementById("circleIcon").onclick = function() { drawShape('circle'); };
        document.getElementById("triangleIcon").onclick = function() { drawShape('triangle'); };
        document.getElementById("iBeamIcon").onclick = function() { drawShape('iBeam'); };
        document.getElementById("saveButton").onclick = saveAsPNG;
    </script>
</body>
</html>
Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

Advent of Code 2024

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci
