画布的HTML属性（宽度、高度）可以独立更改。

Question

我有一些JS脚本，它可以改变画布元素的宽度和高度：

 function RefreshSizes (canvas) {
        var temp_width = 320;
        var temp_height = 240;

        document.getElementById(canvas).setAttribute('width', temp_width);
        document.getElementById(canvas).setAttribute('height', temp_height);
    }

这个函数在画布初始化后立即调用。在Chrome浏览器上运行良好。

但是在FireFox 49中，我发现：

这可能是什么？

UPD#1 BukkitmanPlays MCPE 的测试代码

UPD#2 画布的完整 CSS：

    element {
        width: 320px;
        height: 240px;
    }
    .canvas {
        border: 3px solid #E0E0E0;
        z-index: 0;
        position: relative;
    }
    html {
        font: 10px/10px arial;
    }

- Aleksey Shmakov

---

顺便说一下，这并不取决于在HTML中初始化： <canvas id="canvas1" class="canvas" width="100" height="100"></canvas> <canvas id="canvas2" class="canvas"></canvas> - Aleksey Shmakov

请考虑提供一个 http://stackoverflow.com/help/mcve，以展示您的问题。 - enhzflep

您没有向RefreshSizes()传递任何参数。什么都不会发生。 - Salman A

抱歉 Salman，我认为你现在不正确，第一个例子需要参数，但是第二个例子不需要。 - Aleksey Shmakov

Answer 1

某些浏览器上的代码与其他浏览器上的代码不同，因此在这种情况下，我会这样做：

function RefreshSizes (canv) {
    var temp_width = 320;
    var temp_height = 240;

    var canvas = canv;
    canvas.width = temp_width;
    canvas.height = temp_height;
}

我相信这会起作用。

- BukkitmanPlays MCPE