root
/
HeyPuter
镜像自地址 https://github.com/HeyPuter/puter.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Manipulation</title>
<style>
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

#canvasContainer {
    position: relative;
    display: block;
}

#controls {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999;
    background-color: #f1f1f1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#canvasContainer canvas {
    border: 1px solid #000;
    margin-top: 10px;
    display: block;
    position: relative;
}
</style>
</head>
<body>
<div id="controls">
    <label for="width">Width:</label>
    <input type="number" id="width" min="1">
    <label for="height">Height:</label>
    <input type="number" id="height" min="1">
    <button onclick="createCanvas()">Create Canvas</button>
</div>
<div id="canvasContainer">
</div>

<script>
    let canvasCount = 0;

    function createCanvas() {
        const width = document.getElementById("width").value;
        const height = document.getElementById("height").value;

        if (width <= 0 || height <= 0 || width >= 1080 || height >= 1920) {
            alert("Please enter valid width and height values.");
            return;
        }

        const canvasId = `canvas_${canvasCount}`;
        const canvasContainer = document.getElementById("canvasContainer");
        const canvas = document.createElement("canvas");
        canvas.id = canvasId;
        canvas.width = width;
        canvas.height = height;
        canvasContainer.appendChild(canvas);

        const canvasControls = document.createElement("div");
        canvasControls.classList.add("canvasControls");

        const clearButton = document.createElement("button");
        clearButton.textContent = "Clear";
        clearButton.onclick = function() {
            const ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        };

        const pauseButton = document.createElement("button");
        pauseButton.textContent = "Pause";
        pauseButton.onclick = function() {
            const ctx = canvas.getContext("2d");
            console.log("Pausing v86");
        };
        
        const consoleButton = document.createElement("button");
        consoleButton.textContent = "Get console";
        consoleButton.onclick = function() {
            const ctx = canvas.getContext("2d");
            console.log("Getting v86 console");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        };

        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Delete";
        deleteButton.onclick = function() {
            canvas.remove();
            canvasControls.remove();
        };

        canvasControls.appendChild(clearButton);
        canvasControls.appendChild(deleteButton);
        canvasControls.appendChild(pauseButton);
        canvasControls.appendChild(consoleButton);
        canvasContainer.appendChild(canvasControls);
        canvasCount++;
    }
</script>
</body>
</html>