Creat rotating 3d lines on a 2d canvas refrsh button's game

Click here for free DL of the app version that can save data.

No:48727

←

Prev Next

→

Creat rotating 3d lines on a 2d canvas refrsh but..ALL
Developer User18896｜Date and time 24/3/2 21:26:07
Build time 4.376 sec｜Game capacity 1.116KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Rotating 3D Lines</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border: 1px solid black;"></canvas>
    <button id="refreshButton">Refresh</button>

function drawLines() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const lineLength = 200;

ctx.save();
            ctx.translate(centerX, centerY);
            ctx.rotate(angle);

ctx.beginPath();
            ctx.moveTo(-lineLength / 2, 0);
            ctx.lineTo(lineLength / 2, 0);
            ctx.stroke();

ctx.restore();

angle += 0.1;

requestAnimationFrame(drawLines);
        }

document.getElementById("refreshButton").addEventListener("click", () => {
            angle = 0;
        });

drawLines();
    </script>
</body>
</html>