javascript - 为什么 canvas 不能与 jQuery 选择器一起使用？

Question

我制作了使用 Canvas 的简单示例，然后我发现当我使用 jQuery 选择器时我的代码不起作用。

示例:

Javascript

    window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

JQuery

   window.onload = function() {
        var canvas = $('#myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

所以我不知道为什么会发生这种情况。有什么限制吗？

Answer 1

检查 jQuery fiddle 的更新版本:http://jsfiddle.net/techfoobar/46VKa/3/

问题是:

var canvas = $('#myCanvas') 为您提供一个 jQuery 扩展对象，而不是具有 getContext 等成员函数的 native DOM 元素对象。为此，您需要获取 Canvas 使用 var canvas = $('#myCanvas')[0]

的元素

注意: var canvas = document.getElementById('myCanvas'); 相当于 var canvas = $('#myCanvas')[0]