Question

和一些初学者一样，我一直试图通过将javascript代码转换为jquery来学习JQuery。现在这里是使用HTML Canvas的代码的一部分，允许用户使用Jquery在Canvas中绘制和删除内容：

function init() {
canvas = $('#can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;

canvas.addEventListener("mousemove", function (e) {
    findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
    findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
    findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
    findxy('out', e)
}, false);}

此代码最初是在Javascript中，我刚刚更改了选择器以将其用作Jquery。但我得到的错误如下代码的第3行： 未捕获的TypeError：undefined不是函数

你能指导我为什么这样做。感谢

Answer 1

getContext不是jQuery属性，因此您需要访问底层DOM元素并在其上调用它：

ctx = canvas[0].getContext("2d");

此外，jQuery约定是在包含jQuery对象的变量上使用$前缀。 width和height也是方法，因此应该有尾随括号。最后，如果你想使用jQuery，也可以使用它来附加你的事件：

function init() {
    var $canvas = $('#can');
    var ctx = $canvas[0].getContext("2d");
    var w = $canvas.width();
    var h = $canvas.height();

    $canvas
        .on("mousemove", function(e) { findxy('move', e); })
        .on("mousedown", function(e) { findxy('down', e); })
        .on("mouseup", function(e) { findxy('up', e); })
        .on("mouseout", function(e) { findxy('out', e); });
}

Answer 2

尝试使用canvas = $('#can')[0];

Answer 3

这是因为任何jQuery选择器都将返回一个jQuery对象而不是JS元素实例。如果选择器仅返回1个元素，则它始终位于返回对象的0索引中：

canvas = $('#can')[0];
ctx = canvas.getContext("2d");

无法将Javascript代码转换为JQuery

3 个答案: