Javascript 使用jQuery创建画布元素并设置其宽度和高度属性

我只是尝试在jQuery中执行以下操作：

var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'});
$(body).append(newCanvas);

相反，我只是想知道是否有任何方法可以告诉jQuery，在通过

$（'element'，{attributes}）

创建元素时，宽度和高度应该被视为属性，而不是CSS？

可以这样使用

$('<canvas/>',{'class':'radHuh','Width':100,'Height':200});

$（“”，{'class'：'radHuh'，'Width'：100，'Height'：200}）；

---

更改大小写并尝试jQuery尝试将每个属性名称与jQuery函数名称匹配。匹配的函数被调用

width

和

height

是jQuery函数，因此您的原始代码相当于：

  var newCanvas = 
    $('<canvas/>',{'class':'radHuh'})
    .width(100)
    .height(100);

attrFn

对象定义（）：

var newCanvas=$（“”{
“类”：“radHuh”，
id:“我的画布”
}).道具({
宽度：200，
身高：200
});
$（'#canvas'）.append（newCanvas）；

---

似乎更改任何字母的大小写都会阻止jQuery将属性转换为样式，因此ranganadh可能无意中发现jQuery中的某个缺陷，它根据样式检查属性，但不区分大小写

例如，这似乎也很有效

var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100});
$('body').append(newCanvas);​​​

---

编辑：速度较慢，请参见下面的评论

这可能比此处发布的任何解决方案都要快：

var attributes = {width: 100, height: 100, class: "whatever"};
$('<canvas width="'+attributes.width+'" height="'+attributes.height+'" class="'+attributes.class+'""></canvas>').appendTo(document.body);

var属性={width:100，height:100，class:“whatever”}；
$（'我发现这样做效果最好：

$('<canvas height="50px" width="50px"/>')

$（“”）

您还可以通过这种方式添加
id
、
class
或其他属性。因为它不在
样式=“”
属性，它不算作CSS，会弄乱你的形状。
这很有趣。这是设计造成的还是利用了一些不一致性？我想这是在检查已知的CSS属性！这种行为可能会在jQuery的更高版本中发生变化，所以请记住链接到冻结版本上要清楚，
元素s“like”CSS宽度和高度很好；与HTML
一样，通过CSS设置显示尺寸可以放大/缩小位图。
高度和宽度属性/属性就像在Photoshop中更改图像的大小，设置源图像中的实际像素数。@Phrogz这就是我写作的原因“不太喜欢”…无论如何，我想99%的画布元素都需要这些属性，因为它们与默认比率不匹配等等。@Phrogz，是的，好吧，但要清楚，你需要一些简单的数学来在纯css中正确地缩放它。否则，
画布
将起作用（如你所说）与普通的
img
标签类似，但它不会按比例缩放，而且大多数用户（正如他们所做的那样）在实际理解上存在问题-正是这种准/相似性。实际上，这样做似乎慢了很多：@m90 Hm，有趣，我想知道这背后的原因是什么，它似乎不太符合逻辑。jQuery不仅会将字符串插入DOM，还会以许多不同的方式解析和处理它。如果您将一个简单的HTML标记传递给
$（）
它可以跳过对
$.buildFragment
的调用，这似乎非常昂贵，并通过
.attr（）进行属性处理
本身。请参阅：了解发生了什么。@m90是的，这是我在发表评论后不久的想法，很有意义。很高兴知道这两种方式。虽然这个答案确实有效地设置了样式的高度和宽度，但问题是关于画布的高度和宽度属性。
$（''）.width（100）。height（100）
实际上设置了画布的样式。更合适的答案来自@thecodeparadox。使用
.prop（{width:100，height:100}）
添加我们正在寻找的直接高度和宽度。这应该是可接受的答案。
.prop
为画布元素设置适当的宽度和高度。
attrFn: {
    val: true,
    css: true,
    html: true,
    text: true,
    data: true,
    width: true,
    height: true,
    offset: true
},

var newCanvas = $('<canvas/>',{
                   'class':'radHuh',
                    id: 'myCanvas'                   
                }).prop({
                    width: 200,
                    height: 200
                });
$('#canvas').append(newCanvas);

var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100});
$('body').append(newCanvas);​​​

var newCanvas = $('<canvas/>');
    newCanvas[0].height = 200;
    newCanvas[0].width = 100;

$('body').append(newCanvas);​​​

var attributes = {width: 100, height: 100, class: "whatever"};
$('<canvas width="'+attributes.width+'" height="'+attributes.height+'" class="'+attributes.class+'""></canvas>').appendTo(document.body);

$('<canvas height="50px" width="50px"/>')