Html画布：宽度/高度属性与宽度/高度风格之间的区别

Question

我已经在画布上调整了各种答案，但无法理解我面临的问题。以下是我的Web应用程序中呈现的画布元素。

Before Rendering: 

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

After Rendering: 

    <canvas id="g_5" resize width="1076" height="306" 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; 

这样做了以后，在风格上宽/高取代属性宽度/高度，因此帆布使用样式的高度/宽度。

我的问题是：

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

Answer 1

1. 在html属性中设置宽度/高度首先应用，直到加载CSS。
2. 加载css后，宽度/高度属性将被忽略并使用其样式定义。
3. 使用JavaScript resize代码后，您将在该事件中调整画布大小。