在创建时设置画布宽度/高度

Question

所以我试图在jQueryUI小部件中创建一个画布对象，该小部件具有用户指定的宽度和高度。然后用渐变填充画布。

这样做是行不通的，填充的宽度太窄了

this.canvas = $("<canvas/>", { width: this.options.width, height: this.options.height }).appendTo(this.element);

然而这样做是有效的

this.canvas = $("<canvas width=\""+ this.options.width + "\" height=\""+ this.options.height + "\"/>").appendTo(this.element);

这两种方法有什么区别？

Answer 1

在第二种情况下，canvas元素的宽度和高度将作为属性添加，这是设置画布宽度和高度的正确方法。

在第一种情况下，画布宽度和高度将设置为css样式。使用css设置画布宽度和高度不会设置画布元素的实际宽度和高度，它只会给出原始画布的缩放效果（此尺寸不会被视为执行内部计算）。

检查以下SO Question以获取更多信息...

Answer 2

$('<element/>', {properties})的怪癖是高度和宽度属性应用为样式，而不是属性。

你可以做你想做的事：

   $("<canvas/>").attr({ width: this.options.width, height: this.options.height }).appendTo(this.element);

JSFiddle：http://jsfiddle.net/TrueBlueAussie/LWB2Q/

在回答实际提出的问题时，第一个版本将属性应用为样式。这仅限于特定的jQuery属性，例如，您无法使用它设置{'background-color'：'green'}。

第二个版本将height和width设置为属性，这是您需要的，但更好的方法是如我的示例所示。

一般建议：连接元素的字符串总是一个坏主意（并且最好避免）。