画布的 HTML 属性（宽度、高度）独立变化

Posted 2023-03-05

【中文标题】画布的 HTML 属性（宽度、高度）独立变化

【英文标题】：HTML attributes (width, height) of canvas change independently

【发布时间】：2017-03-13 05:22:22

【问题描述】：

我在 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;
    

【问题讨论】：

顺便说一句，它不依赖于在 HTML 中初始化：

请考虑提供一个***.com/help/mcve 来证明您的问题。

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

对不起萨尔曼，但我认为你现在不是，第一个例子需要参数，但第二个例子不需要

【参考方案1】：

一个浏览器上的一些代码在另一个浏览器上是不一样的，所以在这种情况下，我会做什么：

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

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

我相信这会奏效