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

Question

我一直在搞乱HTML5/Javascript,发现了一些我不理解的东西.

我正在尝试编写一些用于处理HTML5画布的基本例程,并发现drawImage函数没有绘制任何东西.弄清楚它是我的代码,我使用了现有教程中的代码,即HTML5 Canvas Image Tutorial.当我在外部包含Javascript代码(即作为单独的文件)时,我仍然没有看到我的图像被绘制到画布上.

从那里,我复制完整的源代码,在这里找到,逐字逐句,它确实有效.我开始搞乱弄清楚为什么这样有效,但我没有.

我发现不同之处在于逐字代码定义了画布内联的宽度和高度.我更喜欢将样式从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来定义宽度和高度,因为您将缩放画布而不是调整大小,导致模糊和丢失比例.