読者です 読者をやめる 読者になる 読者になる

落書きノート

ふと自分が気になった事を書いてます

HTML CSS JavaScriptでCG作成

面白かったので講座の続きを。ここで少し疲れたかな。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <title>Canvas Tutorial Template</title>
    <script type="text/javascript">
        const NUM = 500;
        const WIDTH = 640;
        const HEIGHT = 480;
        var speedX = new Array(NUM);
        var speedY = new Array(NUM);
        var locX = new Array(NUM);
        var locY = new Array(NUM);
        var radius = new Array(NUM);
        var r = new Array(NUM);
        var g = new Array(NUM);
        var b = new Array(NUM);
        var ctx;

        function init() {
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext) {
                ctx = canvas.getContext('2d');
            }
            for (var i = 0; i < NUM; i++) {
                speedX[i] = Math.random() * 8.0 - 4.0;
                speedY[i] = Math.random() * 8.0 - 4.0;
                locX[i] = WIDTH / 2;
                locY[i] = HEIGHT / 2;
                radius[i] = Math.random() * 8.0 + 1.0;
                r[i] = Math.floor(Math.random() * 64);
                g[i] = Math.floor(Math.random() * 64);
                b[i] = Math.floor(Math.random() * 64);
            }
            setInterval(draw, 33);
        }

        function draw() {
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = "rbga(8,8,12,.1)";
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
            ctx.globalCompositeOperation = "lighter";

            for (var i = 0; i < NUM; i++) {
                locX[i] += speedX[i];
                locY[i] += speedY[i];

                if (locX[i] < 0 || locX[i] > WIDTH) {
                    speedX[i] *= -1.0;
                }

                if (locY[i] < 0 || locY[i] > HEIGHT) {
                    speedY[i] *= -1.0;
                }

                ctx.beginPath();
                ctx.fillStyle = 'rgb(' + r[i] + ',' + g[i] + ',' + b[i] + ')';
                ctx.arc(locX[i], locY[i], radius[i], 0, Math.PI * 2.0, true);
                ctx.fill();
            }
        }

    </script>
    <style type="text/css">
        canvas {
            background-color: #000;
            border: 1px solid #999;
        }

    </style>
</head>

<body onload="init();">
    <canvas id="tutorial" width="640" height="480"></canvas>
</body>

</html>

f:id:kh2n:20170516173836p:plain