3-point perspective drawing's game

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

No:9406

156

←

Prev Next

→

3-point perspective drawing
Developer anonymous｜Date and time 23/7/24 14:27:00
Build time 26.901 sec｜Game capacity 2.951KB｜

Script

了解です。以下に3点透視図形を実装したHTMLファイルを示します。

このHTMLファイルでは、3点透視図形を表示して、スマホのタッチ操作によって各点の座標を変更します。タッチした点に一番近い頂点が移動され、図形が更新されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に3点透視図形を実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3点透視図形</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// 各点の座標と半径を設定
        const points = [
            { x: 100, y: 100, r: 50 },  // 左上
            { x: 300, y: 200, r: 50 },  // 右上
            { x: 200, y: 300, r: 50 },  // 下
        ];

// キャンバスをクリアする関数
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// 図形を描画する関数
        function drawShape() {
            clearCanvas();

// 各頂点を描画
            points.forEach(point => {
                ctx.beginPath();
                ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
                ctx.fill();
                ctx.closePath();
            });

// 左上と右上を結ぶ
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            ctx.lineTo(points[1].x, points[1].y);
            ctx.stroke();
            ctx.closePath();

// 左上と下を結ぶ
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            ctx.lineTo(points[2].x, points[2].y);
            ctx.stroke();
            ctx.closePath();

// 右上と下を結ぶ
            ctx.beginPath();
            ctx.moveTo(points[1].x, points[1].y);
            ctx.lineTo(points[2].x, points[2].y);
            ctx.stroke();
            ctx.closePath();
        }

// タッチイベントの処理
        canvas.addEventListener('touchstart', e => {
            const touch = e.touches[0];

// タッチした座標から一番近い点を取得
            const nearestPoint = points.reduce((nearest, point) => {
                const distance = Math.sqrt(Math.pow(touch.clientX - point.x, 2) + Math.pow(touch.clientY - point.y, 2));
                if (distance < nearest.distance) {
                    nearest.distance = distance;
                    nearest.point = point;
                }
                return nearest;
            }, { distance: Infinity });

// タッチされた座標を更新
            nearestPoint.point.x = touch.clientX;
            nearestPoint.point.y = touch.clientY;

// 描画を更新
            drawShape();
        });

// 初期描画
        drawShape();
    </script>
</body>
</html>
```