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:48724

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3D Lines Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <button onclick="refreshLines()">Refresh Lines</button>

let angle = 0;

function drawLines() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(angle);

for (let i = 0; i < 4; i++) {
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(100 * Math.cos(i * Math.PI / 2), 100 * Math.sin(i * Math.PI / 2));
                ctx.strokeStyle = 'black';
                ctx.stroke();
            }

ctx.restore();
        }

function refreshLines() {
            angle += Math.PI / 90;
            drawLines();
        }

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