一些简单的机器人表情

【代码】一些简单的机器人表情。
残诗

275人浏览 · 2025-02-09 00:17:53
残诗 · 2025-02-09 00:17:53 发布
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几何图形模拟emoji表情</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="emojiCanvas" width="200" height="200"></canvas>

    <script>
        const canvas = document.getElementById('emojiCanvas');
        const ctx = canvas.getContext('2d');

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

        function drawSmileyFace() {
            // Left Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Right Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Mouth
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 20, 40, 0, Math.PI, false);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawSadFace() {
            // Left Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Right Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Mouth
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 40, 40, Math.PI, 2 * Math.PI, false);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawSurprisedFace() {
            // Left Eye Wide Open
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Right Eye Wide Open
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 + 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 + 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Mouth
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 50, 30, 0, Math.PI * 2);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawExcitedFace() {
            // Left Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Right Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Mouth
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 40, canvas.height / 2 + 30);
            ctx.quadraticCurveTo(canvas.width / 2, canvas.height / 2 + 60, canvas.width / 2 + 40, canvas.height / 2 + 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawEnjoyingFace() {
            // Left Eye Closed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Right Eye Closed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 + 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 + 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Mouth Curved Up
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 20, 40, 0, Math.PI, true);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawAngryFace() {
            // Left Eye Narrowed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 20);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Right Eye Narrowed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 + 30 - 10, canvas.height / 2 - 20);
            ctx.lineTo(canvas.width / 2 + 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Mouth Straight Line
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 40, canvas.height / 2 + 40);
            ctx.lineTo(canvas.width / 2 + 40, canvas.height / 2 + 40);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawConfusedFace() {
            // Left Eye Confused
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Right Eye Confused
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 + 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 + 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Mouth Question Mark
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 20, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, canvas.height / 2 + 30);
            ctx.lineTo(canvas.width / 2, canvas.height / 2 + 50);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawGrinningFace() {
            // Left Eye Grinning
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Right Eye Grinning
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Tongue Out
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 40, canvas.height / 2 + 50);
            ctx.quadraticCurveTo(canvas.width / 2, canvas.height / 2 + 70, canvas.width / 2 + 40, canvas.height / 2 + 50);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 70, 10, 0, Math.PI, false);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawWinkingFace() {
            // Left Eye Closed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30);
            ctx.lineTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Right Eye
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 30, canvas.height / 2 - 30, 10, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Mouth
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 20, 40, 0, Math.PI, false);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawShyFace() {
            // Left Eye Small
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 30, canvas.height / 2 - 30, 5, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Right Eye Small
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 30, canvas.height / 2 - 30, 5, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();

            // Mouth Small
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 + 30, 20, 0, Math.PI, false);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawDizzyFace() {
            // Left Eye Crossed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30 - 10);
            ctx.lineTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 30 + 10);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30 + 10, canvas.height / 2 - 30 - 10);
            ctx.lineTo(canvas.width / 2 - 30 - 10, canvas.height / 2 - 30 + 10);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Right Eye Crossed
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 + 30 - 10, canvas.height / 2 - 30 - 10);
            ctx.lineTo(canvas.width / 2 + 30 + 10, canvas.height / 2 - 30 + 10);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 + 30 + 10, canvas.height / 2 - 30 - 10);
            ctx.lineTo(canvas.width / 2 + 30 - 10, canvas.height / 2 - 30 + 10);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Mouth Dizzy Lines
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 40, canvas.height / 2 + 30);
            ctx.lineTo(canvas.width / 2 + 40, canvas.height / 2 + 30);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 30, canvas.height / 2 + 40);
            ctx.lineTo(canvas.width / 2 + 30, canvas.height / 2 + 40);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2 - 20, canvas.height / 2 + 50);
            ctx.lineTo(canvas.width / 2 + 20, canvas.height / 2 + 50);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }

        function drawHeartFace() {
            // Heart Shape
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, canvas.height / 2 - 50);
            ctx.bezierCurveTo(canvas.width / 2 + 30, canvas.height / 2 - 90, canvas.width / 2 + 90, canvas.height / 2 - 60, canvas.width / 2 + 90, canvas.height / 2 - 30);
            ctx.bezierCurveTo(canvas.width / 2 + 90, canvas.height / 2, canvas.width / 2 + 60, canvas.height / 2 + 40, canvas.width / 2, canvas.height / 2 + 20);
            ctx.bezierCurveTo(canvas.width / 2 - 60, canvas.height / 2 + 40, canvas.width / 2 - 90, canvas.height / 2, canvas.width / 2 - 90, canvas.height / 2 - 30);
            ctx.bezierCurveTo(canvas.width / 2 - 90, canvas.height / 2 - 60, canvas.width / 2 - 30, canvas.height / 2 - 90, canvas.width / 2, canvas.height / 2 - 50);
            ctx.fillStyle = 'red';
            ctx.fill();
            ctx.stroke();

            // Eyes Inside Heart
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 20, canvas.height / 2 - 70, 5, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 20, canvas.height / 2 - 70, 5, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();

            // Pupils Inside Eyes
            ctx.beginPath();
            ctx.arc(canvas.width / 2 - 20, canvas.height / 2 - 70, 2, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(canvas.width / 2 + 20, canvas.height / 2 - 70, 2, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();
        }

        const emojis = [
            drawSmileyFace,
            drawSadFace,
            drawSurprisedFace,
            drawExcitedFace,
            drawEnjoyingFace,
            drawAngryFace,
            drawConfusedFace,
            drawGrinningFace,
            drawWinkingFace,
            drawShyFace,
            drawDizzyFace,
            drawHeartFace
        ];

        function changeEmoji() {
            clearCanvas();
            const randomIndex = Math.floor(Math.random() * emojis.length);
            emojis[randomIndex]();
        }

        // 初始调用一次
        changeEmoji();

        setInterval(changeEmoji, Math.random() * 3000 + 2000); // 每2到5秒切换一次表情
    </script>
</body>
</html>