素材牛VIP会员
在用canvas绘制五子棋棋盘时候遇到的问题
 gu***un  分类:Html5  人气:913  回帖:1  发布于6年前 收藏

我想用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>

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

这是为什么呢?

 标签:htmlhtml5

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv4 码徒
那***哦 移动开发工程师 6年前#1

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取