落書きノート

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

HTML CSS JavaScriptでCG作成

まあ、パターンが決まりつつありますが、乱数の使い方によっては少し作品の印象が変わるなと思いました。2枚目の写真はfor文のパラメータをいじった結果です。

<html>

<head>
    <title>Canvas tutorial template</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.globalAlpha = 0.5;
                for (i = 0; i < 500; i++) {
                    ctx.beginPath();
                    var r = Math.floor(Math.random() * 256);
                    var g = Math.floor(Math.random() * 256);
                    var b = Math.floor(Math.random() * 256);
                    ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
                    ctx.arc(Math.random() * 400, Math.random() * 300, Math.random() * 15, 0, Math.PI * 2, false);
                    ctx.fill();
                }
            }
        }

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

    </style>
</head>

<body onload="draw();">
    <canvas id="tutorial" width="400" height="300"></canvas>
</body>

</html>

f:id:kh2n:20170520184442p:plain

f:id:kh2n:20170520184551p:plain