Canvasで超簡単に点線・破線を引く方法！JavaScript

こんにちは、
今回はCanvasで点線、破線を簡単に引く方法を
ご紹介致します。

なんとリファレンスをみる限り
Canvasは点線や破線は引けないみたいですね。

Canvasの点線や破線を引こうと検索しましたが、
ライブラリや長々とコードを書かなくてはならない方法が多かったので
シンプルに点線・破線を引きました。

Canvasで点線・破線を引く方法！

完成は上の画像です。

方法だけ書きますと、

Canvasに線を引くlineToは使用せず、
stokeStyleもしくはarcを使用。
そして引きたい座標に
反復して描画します。

サンプルコード

//html

<canvas id="canvas"></canvas>


<script>
     var cs = document.getElementById('canvas'),
                ctx = cs.getContext('2d'),
                csWidth = cs.width,
                csHeight = cs.height,
                center = {
                    x: csWidth / 2,
                    y: csHeight / 2
                };
            ctx.fillStyle = 'rgba(234,234,234,1)';
            ctx.lineWidth = 1;

  // 横線を引く
            var drawHorizontalLine = function () {
                ctx.beginPath();
                ctx.moveTo(0, center.y);
                for (var i = 0; i < csWidth; i++) {
                    if(i%9==0) ctx.fillRect(i, center.y, 3,3);
                }   
                ctx.closePath();
                ctx.stroke();
            };

            // 縦線を引く
            var drawVerticalLine = function () {
                ctx.beginPath();
                ctx.moveTo(center.x, 0);
                for (var j = 0; j < csHeight; j++) {
                    if(j%9==0) ctx.fillRect(center.x, j, 3,3);
                }
                ctx.closePath();
                ctx.stroke();
            };

            drawHorizontalLine();
            drawVerticalLine();

</script>

参考:Canvasで色々な直線を引いてみよう！【おまけつきだ・・・っ！】