HTML画布被调整为0px

Question

我有一个MVC Razor页面，上面有<canvas>元素。这是视图代码

<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中产生任何输出。画布应该是一个空白方块。当我在Chrome中检查元素时，会显示以下信息：

<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？

Answer 1

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