jquery - 无法在窗口调整大小和使用 jQuery 绑定画布时从 DOM 获取画布

Question

在我的视图模型构造函数中，我这样做：

$(窗口).resize(resizeCanvas);

function resizeCanvas() {

    var canvas = $('#mycanvas');
    canvas.attr('width', 333); //max width
    canvas.attr('height', 444); //max height

    var context = canvas.getContext('2d');

}

所有与画布或上下文相关的方法都丢失了，而是我得到了一个画布 html 元素，为什么会这样？

Answer 1

$("#mycanvas")返回一个引用您的画布 DOM 元素的 jQuery 对象。它实际上并不返回画布元素本身。像数组一样使用 jQuery 对象来获取实际的画布对象：

canvas.length === 1; // jQuery object refers to only a single element
var canvasElement = canvas[0]; // get actual canvas element
var context = canvasElement.getContext('2d');

为变量采用命名约定以了解它们何时是 jQuery 对象或 DOM 元素是一个好主意。我喜欢$为我的 jQuery 变量添加前缀：

var $canvas = $("#mycanvas");
$canvas.attr(...);
var canvas = $canvas[0];
var context = canvas.getContext('2d');

Answer 2

您var canvas实际上是一个 jQuery 对象，而不是实际的 html 画布元素。

试试这个：

var canvas = $('#mycanvas')[0];
canvas.width=333; //max width
canvas.height=444; //max height

var context = canvas.getContext('2d');