JavaScriptで一定の間隔で角度の違う線を引く

昔どこかで見た線を引くサンプルプログラムをJavaScriptで再現してみます。

こんな感じだったような気もしますが、中心部分の空白が無かったような気もします。

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>JavaScriptで一定の間隔で角度の違う線を引く</title>
    </head>
    <body>
        <canvas id="cv" width="256" height="192"></canvas>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("cv");
                var context = canvas.getContext("2d");

                context.strokeStyle = "black";
                context.lineWidth = 1;
                
                var width = canvas.width;
                var height = canvas.height;

                const R = 8;

                for(let i=0; i < 64; i++) {
                    context.moveTo(0, (i)*R);
                    context.lineTo((i+1)*R, height);
                    context.stroke();

                    context.moveTo(width, (i)*R);
                    context.lineTo(width-(i+1)*R, height);
                    context.stroke();

                    context.moveTo(width, height-(i)*R);
                    context.lineTo(width-(i+1)*R, 0);
                    context.stroke();

                    context.moveTo(0, height-(i)*R);
                    context.lineTo((i+1)*R, 0);
                    context.stroke();
                }
            }
        </script>
    </body>
</html>

ソースコード

コメント