javascript - 具有绝对位置的 html5 Canvas 不起作用

Question

具有绝对位置的 Canvas 不起作用，您可以在此处看到: http://jsfiddle.net/733zs/1/ (已在 Firefox 和 Chrome 中测试)矩形的大小应为 500x500 像素。

有没有办法让它在不手动设置宽度和高度的情况下工作？还是我做错了什么？

Answer 1

您必须手动设置宽度和高度。

这可以通过 JavaScript onresize 事件来完成 - 这很好，因为无论如何您几乎总是需要在调整大小时重绘 Canvas 表面。

编辑:

根据 W3 规范，这里是 Canvas DOM 界面:

http://www.w3.org/TR/html5/the-canvas-element.html

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(in optional DOMString type, in any... args);
  void toBlob(in FileCallback, in optional DOMString type, in any... args);

  object getContext(in DOMString contextId, in any... args);
};

The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.