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

落書きノート

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

HTML CSS JavaScriptでCG作成

講座を見て自分でやってみました。乱数便利!

<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.3;
                for (i = 0; i < 1000; 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.strokeStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
                    ctx.arc(Math.random() * 400, Math.random() * 300, 5, 0, Math.PI * 2, false);
                    ctx.stroke();
                }
            }
        }

    </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:20170516171819p:plain

<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, 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:20170516171849p:plain