Question

我一直在搞乱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的最新版本中尝试了这一点。

Answer 1

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

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

顺便提一下，默认值是300x150。

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

Answer 2

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

Answer 3

根据HTML5规范，不需要：

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

Answer 4

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

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

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

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