画布默认大小

Posted 2023-03-05

【中文标题】画布默认大小

【英文标题】：canvas default size

【发布时间】：2011-12-09 05:13:47

【问题描述】：

Chrome 似乎将画布标签的默认宽度设置为 300 像素。

当我希望画布默认为其包含 div 的大小时，这有点麻烦。

使用示例here，我希望画布默认为标题的宽度并添加填充。

希望这是有道理的。

如果没有 javascript，这可能吗？

【参考方案1】：

安排您的布局，以便有一个 div，而该 div 的唯一工作是规定和成为您希望画布的大小。

var canvas = document.createElement('canvas');
canvas.width = div.clientWidth;
canvas.height = div.clientHeight;

然后将画布添加到 div 中。

【讨论】：

这是显而易见的答案，但是我的问题是画布标签已在服务器端生成 - 它不是在客户端创建的。这是不好的做法吗？

只要您能够使用相同的技术，设置画布的宽度和高度应该不会有任何问题。 Mozilla Bespin 过去经常检查 div 是否改变了大小，然后相应地（重新）设置画布。

我想如果用户禁用了 javascript，我想确保布局看起来不错。完全避免使用 javascript 来设置初始布局的样式。看起来这是不可能的，这似乎是 canvas 标签的严重限制。同样，我可能做错了什么/使用了不良做法。

如果 JavaScript 无论如何都被禁用，Canvas 基本上毫无价值。 ://

好吧，如果必须的话，在服务器端创建它们（无论如何你正在这样做），宽度和高度为 1。如果他们碰巧启用了javascript，则对其进行调整。

【参考方案2】：

芬恩，你是对的。

来自 html5 规范， http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

canvas元素有两个属性来控制坐标空间的大小：宽度和高度。

这些属性在指定时必须具有有效的非负整数值。

width属性默认为300，height属性默认为150。

【讨论】：

w3.org/TR/2012/WD-html5-author-20120329/…

这很奇怪，对吧？我想不出任何其他具有这样“默认尺寸”的元素。我想知道为什么选择这些特定尺寸。

回答问题，但不是以建设性的方式。 @Simin Sarris 为我们提供了摆脱这种任意限制的方法

【参考方案3】：

我可以确认，在 Chrome 中，默认大小是 300px x 150px。

【讨论】：

Firefox 也是如此。