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

Setting canvas width / height on creation

本文关键字：布宽度 高度 设置 创建      更新时间：2023-09-26

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

这样做不起作用，fillrect的宽度太窄了

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);

这两种方法的区别是什么?

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

在第一种情况下，画布的宽度和高度将被设置为css样式。使用css设置画布的宽度和高度不会设置画布元素的实际宽度和高度，它只会给出原始画布的缩放效果(这个大小不会被认为执行内部计算)。

$('<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设置为属性，这是您需要的，但更好的方法是在我的示例中显示。

一般建议:为元素串联字符串总是一个坏主意(最好避免)。

相关文章：