HTML5でCanvasを使う

作ってみた

Canvasのサンプルプログラム

RGBのランダムな組み合わせで色を変えて、線を引き続けるプログラムです。

http://island-web.jp/air/lesson/HTML5/canvas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5でCanvasを使う</title>
<script>
(function() {
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;
 
        var ctx = canvas.getContext("2d");
 
        var n = 16;
        var i = 0;
        var j = 1;
        var r = Math.min(canvas.width, canvas.height) / 2;
        var color = "rgb(0,0,0)";
        var random = function(max) {
            return Math.floor(Math.random() * max);
        };
 
        (function drawLine() {
            ctx.beginPath();
            var x1 = Math.cos(i / n * Math.PI * 2 + Math.PI / 2) * r + r;
            var y1 = -Math.sin(i / n * Math.PI * 2 + Math.PI / 2) * r + r;
            ctx.moveTo(x1, y1);
            var x2 = Math.cos(j / n * Math.PI * 2 + Math.PI / 2) * r + r;
            var y2 = -Math.sin(j / n * Math.PI * 2 + Math.PI / 2) * r + r;
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = color;
            ctx.closePath();
            ctx.stroke();
            j++;
            if(j >= n) {
                i++;
                if(i >= n - 1) {
                    color = "rgb(" + random(256) + "," + random(256)
                                + "," + random(256) + ")";
                    i = 0;
                }
                j = i + 1;
            }
            setTimeout(drawLine, 20);
        })();
    };
})();
</script>
</head>
<body>
<canvas id="canvas" />
</body>
</html>