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

html5 canvas - does the width/height need to be defined inline?

本文关键字：定义 高度 画布 是否 html5      更新时间：2023-09-26

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

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

从那里，我逐字逐句地复制了完整的来源，在这里找到了，它确实起了作用。我开始胡思乱想，想弄清楚为什么这样做有效，但我的没有。

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

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

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

我确实确定我的问题之一是在Javascript文件之后包含样式表；在此之前，我的图像根本没有出现，甚至在通过alert（）函数确认图像加载处理程序中的代码正在启动之后也是如此。在更改了文件的包含顺序后，我的图像确实出现了，但缩放得很奇怪，好像忽略了CSS样式。

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

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

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

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

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

根据HTML5规范，这是不需要的：

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

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

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

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

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

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

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

相关文章：