落書きノート

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

HTML CSS JavaScriptでCG作成

VSCode,汎用的に使えるのは良いですが、インデントの挙動がおかしいとかがあって、まだところどころバグがあるんじゃないのかと思うのですが…。試しにAdobe提供のBracketsを使ってみると便利に使えたのでこちらを使ってみてます。Google Chromeでないとライブプレビューが使えないというのが少し気になりましたが、インストールして使うようにしました。拡張機能はBeautifyをインストールしました。ソースコードのフォーマッタですね。

この分野のプログラミング、コツを掴むと面白いと思います。ゲームプログラミングをしているかのような。普段からアルゴリズムの問題を解いてますけど、これの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.5;
                ctx.beginPath();
                ctx.fillStyle = '#3399FF';
                ctx.arc(150, 150, 80, 0, Math.PI * 2.0, true);
                ctx.fill();
                ctx.beginPath();
                ctx.fillStyle = '#FF9933';
                ctx.arc(250, 150, 80, 0, Math.PI * 2.0, true);
                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:20170516153150p: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.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.moveTo(Math.random() * 400, Math.random() * 300);
                    // ランダムな場所まで線を描く
                    ctx.lineTo(Math.random() * 400, Math.random() * 300);
                    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:20170516153920p:plain

<html>

<head>
    <title>Canvas tutorial template</title>
    <script type="text/javascript">
        var speedX = 3.0;
        var speedY = 4.0;
        var locX = 200;
        var locY = 150;
        var ctx;

        function init() {
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext) {
                ctx = canvas.getContext('2d');
                setInterval(draw, 33);
            }
        }

        function draw() {
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = "rgba(8,8,12,.2)";
            ctx.fillRect(0, 0, 400, 300);
            ctx.globalCompositeOperation = "lighter";

            locX += speedX;
            locY += speedY;

            if (locX < 0 || locX > 400)
                speedX *= -1;

            if (locY < 0 || locY > 300)
                speedY *= -1;

            ctx.beginPath();
            ctx.fillStyle = '#3399FF';
            ctx.arc(locX, locY, 4, 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="400" height="300"></canvas>
</body>

</html>

f:id:kh2n:20170516153902p:plain