Html Canvas：宽度/高度属性和宽度/高度样式之间的区别[重复]

Posted 2023-03-05

【中文标题】Html Canvas：宽度/高度属性和宽度/高度样式之间的区别[重复]

【英文标题】：Html Canvas : difference between width/height attribute and width/height style [duplicate]

【发布时间】：2016-05-15 04:11:04

【问题描述】：

我在 canvas resize 上看到了各种答案，但无法理解我面临的问题。以下是在我的 Web 应用程序上呈现的画布元素。

Before Rendering: 

    <canvas id="g_5" resize></canvas>

After Rendering:

     <canvas id="g_5"  resize   style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1148.38px; height: 300px;"></canvas>  

我将画布的高度和宽度设置如下：

        var canvas = document.getElementById(canvasId);
        var context = canvas.getContext('2d');
        var width = <someWidth>;  //=1076 in this case
        var height = <someHeight>; //=306 in this case
        canvas.width = width;
        canvas.height = height;

完成此操作后，样式中的宽度/高度将取代属性宽度/高度，因此画布使用样式的高度/宽度。

我的问题是：

为什么有两种不同的宽度/高度？ 如何将它们设置为具有相同的值 如果我从画布元素中删除resize 属性，画布大小将保持为默认大小。

【参考方案1】：

在加载 css 之前，首先应用在 html 属性中设置宽度/高度。 加载 css 后，宽度/高度属性将被忽略并使用其样式定义。 使用 javascript 调整大小代码后，您将在该事件中调整画布大小。

【讨论】：

如何忽略点#2，我想为画布使用属性宽度和高度。

然后去掉样式css width/height。

我没有在我的代码中添加样式 css，它是默认添加的。

如果是某些脚本导致您出现这种情况。