具有绝对位置的html5画布不起作用答案

【问题标题】：html5 canvas with absolute position doesn't work具有绝对位置的html5画布不起作用
【发布时间】：2012-01-11 14:34:02
【问题描述】：

绝对位置的画布不起作用，如您在此处看到的： http://jsfiddle.net/733zs/1/（在 Firefox 和 Chrome 中测试）矩形的大小应为 500x500 像素。

有没有办法让它工作，而无需手动设置宽度和高度？还是我做错了什么？

【问题讨论】：

标签： javascript css html html5-canvas

【解决方案1】：

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

这可以通过 JavaScript onresize 事件来完成 - 这很好，因为无论如何您几乎总是需要重新绘制画布表面 onresize。

编辑：

来自 W3 规范，这里是画布 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);
};

canvas元素有两个属性来控制坐标空间：宽度和高度。这些属性，当指定时，必须具有有效的非负整数值。规则为解析非负整数必须用来获取它们的数值价值观。如果缺少一个属性，或者如果解析它的值返回一个错误，则必须改用默认值。宽度属性默认为300，高度属性默认为150。

【讨论】：

所以你的意思是'canvas'你必须手动做，但'div'不是？
正确的画布需要高度和宽度。不能通过右下角完成。
所以我测试了这个：jsfiddle.net/733zs/4 我必须手动设置宽度和高度，但画布在 offsetwidth 和 offsetheight 中有这些值
不，这不是错误。另外，在我上一条评论中，我的意思不是“正确的画布……”，我的意思是“正确的画布……”
+1 表示onresize，我会再次+1 以链接和引用规范。传递秘密：规格值得一读。

【解决方案2】：

由于画布元素只有 300,150 像素大，矩形被剪裁了。

http://jsfiddle.net/733zs/3/

【讨论】：

我知道，但为什么没有页面那么大？我的css说左边0px，右边0px，顶部0px，底部0px。
这个答案没有回答 OP 的问题。

【解决方案3】：

定位工作正常。您只是在画布的右下角绘制黑框。

【讨论】：

为什么不左右同时呢？对于 div，它正在工作。