fillRect无法正常工作

Question

我在Chrome应用中使用了html canvas元素，但fillRect无效。它打印出一个实心的矩形但不正确。

我这样做了：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);

但它看起来像这样：

它看起来应该是这样的

这是什么问题？

CSS？

#canvas {
  width: 896px;
  height: 896px;
  background-image: url('assets/underlays/transUnderlay_28.png');
}

HTML？

<td>
  <div id='canvasWrapper'>
    <canvas id='canvas'></canvas>
  </div>
</td>

请帮忙！

Answer 1

在height元素中添加width和<canvas>而不是CSS：

<td>
  <div id='canvasWrapper'>
    <canvas id='canvas' width='896' height='896' ></canvas>
  </div>
</td>

对于HTML 5画布，width和height属性用于设置画布坐标系的实际宽度/高度，而普通CSS width和height仅作为元素的大小（不考虑元素坐标系）。