在用canvas绘制五子棋棋盘时候遇到的问题

Question

我想用canvas绘制一个五子棋棋盘，但是遇到一个很奇怪的问题。代码如下

<canvas id="chessboard" class="chessboard"></canvas>
<script>
    Gobang.prototype.drawChessboard = function() {
        var chessboardCanvas = document.getElementById("chessboard");
        var chessboardCtx = chessboardCanvas.getContext('2d');
        for(var i = 0; i < 15; i++){
            chessboardCtx.moveTo(15 + i * 30 , 15);
            chessboardCtx.lineTo(15 + i * 30 , 435);
            chessboardCtx.stroke();
            chessboardCtx.moveTo(15 , 15 + i * 30);
            chessboardCtx.lineTo(435 , 15 + i * 30);
            chessboardCtx.stroke();
        }
    };
    var gobang = new Gobang();
    gobang.drawChessboard();
</script>

结果绘制的棋盘是这样的：

这是为什么呢？

Answer 1

要在html的canvas里设置好宽高。