为什么使用canvas像素变大了

这个问题困扰了我一早上，先看dom结构

    <div class="game-frame-wrap">
        <div class="game-frame">
            <canvas id="game-canvas" ></canvas>
            <div class="game-info"></div>
        </div>
    </div>

然后获取canvas标签的CSS，设置宽高600px

        .game-frame #game-canvas{
            width: 600px;
            height: 600px;
            background-color: green;
        }

但是实际显示效果是这样的

这里并没有显示完全整个地图出来，当我删除canvas宽高之后发现这时候的宽高为300px,150px这时候才发现canvas默认的画布为300px,150px。

查了好久才找到答案，原因是在CSS里设置的宽高是容器的宽高600px，但是画布的宽高是300px,150px，像素自然被拉大了，于是有两种办法改变画布的宽高 第一种方法：嵌入html改变canvas标签的宽高（没有单位）

    <div class="game-frame-wrap">
        <div class="game-frame">
            <canvas id="game-canvas" width="300" height="300"></canvas>
            <div class="game-info"></div>
        </div>
    </div>

第二种方法：直接绑定canvas的id，然后直接设置宽高

            var gameInfo = document.getElementById('game-info');//获取显示步数等信息栏
            var canvas = document.getElementById('game-canvas'); //获取画板id
            var ctx = canvas.getContext('2d')   //创建2d画板内容
            canvas.width = "600"
            canvas.height = "600"

然后就能得到想要的效果了

总结

容器的宽高和画布宽高设置不一样，需要单独设置画布宽高