Javascript 正在将HTML画布调整为0px

我有一个MVC Razor页面，上面有一个

元素。这是查看代码

<canvas id="chartBlock@(id)" class="chart" height="@(Model.height ?? 500)" 
width="@(Model.width ?? 500)" style="min-width: @(Model.width ?? 0)px; 
min-height: @(Model.height ?? 0)px"></canvas>

它不会在Chrome或IE中产生任何输出。画布应该是一个空白正方形。当我检查铬元素时，它显示如下：

<canvas id="chartBlock30" class="chart" height="120" width="0" style="min-width: 220px;
 min-height: 120px; width: 0px; height: 120px;"></canvas>

如果我在Chrome控制台中将鼠标移到它上面，它会在屏幕上高亮显示所需大小的块

但是，源代码中的宽度为0，当我尝试使用javascript绘制画布时，context.canvas.width等于0。为什么画布的宽度为0？

<canvas id="chartBlock30" class="chart" height="120" width="220" style="width: 0; height: 0; border: 1px solid;"></canvas>

您的高度和宽度属性是可为空的类型吗？只能对引用或可为null的类型使用null合并运算符。确保您使用的是int之类的东西？而不是int@heymega它们都可以为null（int？），并且被显式设置为常量值。高度=120，宽度=220。这是上面屏幕中突出显示的矩形的大小。好的-我只是在赌博。如果您硬编码width属性（删除razor代码），您仍然会遇到这个问题吗？您甚至可以检查提供视图的XHR请求的响应主体，查看画布宽度是否有值，以防脚本可能会更改it@heymega是的，如果我在视图中硬编码高度和宽度值，问题仍然存在。当我检查元素并突出显示块时，它已调整为新的大小，但宽度仍然为0，我的javascript中仍然得到

context.canvas.width==0

。画布宽度和高度与样式宽度和高度不同，为什么需要最小宽度和最小高度？我添加了最小宽度和最小高度以缓解此问题。我不能将这些值硬编码到视图中，因为我在很多事情上都使用这个视图。我只能在控制器方法中硬编码它们。答案是：：无论画布大小如何，如果设置样式宽度：（x）px和高度：（y）px，浏览器将显示此块；也许你需要先学习CSS。@sirdank这个答案是正确的-我不知道你在内联样式中设置宽度值。我以为你只是在设置最小宽度。@heymega我没有设置宽度或高度，那只是chrome添加的糖。如果你看一下我问题中的代码，你会发现我没有设置宽度或高度。这只是问题的一个征兆。