javascript - html5 canvas - 是否需要内联定义宽度/高度？

Question

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

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

从那里，我复制了完整的源代码，找到了 here , 逐字记录，它确实起作用了。我开始胡思乱想，弄清楚为什么这行得通，但我的行不通。

我发现不同之处在于逐字代码定义了内联 Canvas 的宽度和高度。我更喜欢将样式从 HTML 分离到 CSS 中。如果我这样做，代码会起作用:

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

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

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

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

Answer 1

您不必将它们写在那里，您可以稍后在 JavaSript 中编写它们:

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

顺便说一句，默认值是 300x150。

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