html5 画布 - 是否需要内联定义宽度/高度？答案

【问题标题】：html5 canvas - does the width/height need to be defined inline?html5 画布 - 是否需要内联定义宽度/高度？
【发布时间】：2012-03-15 07:31:21
【问题描述】：

我一直在搞乱 HTML5 / Javascript，发现了一些我不明白的东西。

我试图编写一些基本例程来处理 HTML5 画布，但发现 drawImage 函数没有绘制任何东西。确定这是我的代码，我使用了现有教程中的代码，即HTML5 Canvas Image Tutorial。当我在外部包含 Javascript 代码时（即作为单独的文件），我仍然没有看到我的图像被绘制到画布上。

从那里，我复制了完整的源代码，逐字逐句地找到了 here，它确实有效。我开始胡思乱想，想弄清楚为什么这会奏效，但我的却没有。

我发现不同之处在于逐字代码定义了画布内联的宽度和高度。我更喜欢将样式从 HTML 和 CSS 中分离出来。如果我这样做，代码就可以工作：

<canvas id = "myCanvas" width = "600" height = "400"></canvas>

但如果我在外部 CSS 样式表中定义了画布宽度和高度，则不起作用。

我确实确定我的问题之一是我在 Javascript 文件之后包含了样式表；在此之前，我的图像根本没有出现，即使在通过 alert() 函数确认图像 onload 处理程序内的代码正在触发之后也是如此。更改包含文件的顺序后，我的图像确实出现了，但被奇怪地缩放，就好像 CSS 样式被忽略了一样。

这是为什么？我是否遗漏了有关通过 CSS 定义画布属性的顺序的内容？为什么在这种情况下 Javascript 会忽略 CSS 样式？如果它完全相关，我已经在 Chrome 和 Firefox 的最新版本中尝试过。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

你没有有在那里写它们，你可以稍后在JavaSript中写它们：

var can = document.getElementById('canvas1');
can.width = 600;
can.height = 400;

顺便说一下，默认值为 300x150。

请注意，您永远不应该使用 CSS 来定义您的宽度和高度，因为您将缩放画布而不是调整它的大小，从而导致模糊和比例损失。

【讨论】：

【解决方案2】：

根据 HTML5 规范，它不是必需的：

canvas元素有两个属性来控制坐标空间的大小：width和height。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用默认值。 width 属性默认为 300，height 属性默认为 150。

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

【讨论】：

您可能还应该引用 However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size. 所以，如果您使用样式表更改画布的大小，则画布上的图像会缩放（拉伸）以适应新的大小。
是的。如果你改变了画布的实际宽度或高度，它将被清除

【解决方案3】：

是的，它们应该写在属性中，否则画布实际大小将等于300x150。如果你用 css 改变它的大小，它会像任何其他图像一样被拉伸/重新缩放。

【讨论】：

【解决方案4】：

元素有两个不同的宽度和高度属性。

一个通常是内联定义的（或稍后在 javascript 本身中定义）。这是程序用于绘图目的的画布的实际像素尺寸。

一个是样式的宽度和高度。这可以由 CSS 定义（而像素的宽度和高度不能）。

简单的答案是否定的。如果您愿意，您可以在 javascript 中设置宽度和高度，但是您通过 CSS 分配的任何高度和宽度都会改变画布的显示尺寸（不是实际尺寸），这可能会扭曲您的图像。

【讨论】：