Automatic Oekaki A picture is automatically drawn by JavaScript canvas. The picture drawn is random, but it must be a human face. The picture must be a human face. Clicking the Regenerate! button, the picture will be regenerated.'s game

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

No:7995

4276

←

Prev Next

→

Automatic Oekaki A picture is automatically drawn ..ALL
Developer もちきなこ｜Date and time 23/7/11 18:41:50
Build time 13.579 sec｜Game capacity 2.178KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自動絵描き</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <button onclick="generate()">再生成！</button>

// 顔の特徴のランダムな値を生成する関数
        function getRandomValue(min, max) {
            return Math.random() * (max - min) + min;
        }

// 顔の特徴のランダムな色を生成する関数
        function getRandomColor() {
            const colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF"];
            return colors[Math.floor(Math.random() * colors.length)];
        }

// 顔を描く関数
        function drawFace() {
            const x = canvas.width / 2;
            const y = canvas.height / 2;
            const faceSize = getRandomValue(100, 200);
            const eyeSize = faceSize / 10;
            const mouthSize = faceSize / 5;

// 顔の円を描く
            ctx.beginPath();
            ctx.arc(x, y, faceSize, 0, Math.PI * 2);
            ctx.fillStyle = getRandomColor();
            ctx.fill();

// 左目を描く
            ctx.beginPath();
            ctx.arc(x - faceSize / 3, y - faceSize / 5, eyeSize, 0, Math.PI * 2);
            ctx.fillStyle = getRandomColor();
            ctx.fill();

// 右目を描く
            ctx.beginPath();
            ctx.arc(x + faceSize / 3, y - faceSize / 5, eyeSize, 0, Math.PI * 2);
            ctx.fillStyle = getRandomColor();
            ctx.fill();

// 口を描く
            ctx.beginPath();
            ctx.arc(x, y + faceSize / 5, mouthSize, 0, Math.PI);
            ctx.strokeStyle = getRandomColor();
            ctx.lineWidth = faceSize / 20;
            ctx.stroke();
        }

// 絵を再生成する関数
        function generate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawFace();
        }

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