javascript - 哪种创建一定大小画布的 jQuery 方法性能最好？

Question

我想做的是用 jQuery 创建一个 15 x 15 像素大小的画布，我正在寻找一种优雅的方式来做到这一点。

我目前使用 jQuery 创建一个画布，如下所示：

var canvasNode = $('<canvas />', {
  style:'display:block',
  width:15,
});

// canvasNode[0].width=15;
canvasNode[0].height=15;

奇怪的是，width:15当下面当前注释掉的行做我想做的事情时， in 没有效果。我也尝试过style:'display:block;width:15px;'，但是当它以 15px 宽度显示画布时，画布本身保持在其较大的默认尺寸，所以它只是被缩放，所以这不是我想要的。

score 2 · Accepted Answer

如果您真的担心性能，这是最快的方法（未经测试，但我确信它是）：

var canvas = document.createElement("canvas");
canvas.width = 15;
canvas.height = 15;

也就是说，根本没有 jQuery。

score 1 · Accepted Answer

请注意，发送具有宽度属性的对象会将css宽度设置为15px（基本上只是缩放画布），如果没有指定宽度属性，画布仍将使用默认的宽度像素数创建，通常为300像素。

只需设置宽度和高度属性：

$('<canvas />', {
  style:'display:block'
}).attr('width', 15).attr('height', 15);

2 回答 2