javascript 为什么画布不适用于 jQuery 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11574038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why canvas doesn't work with jQuery selector?
提问by Mateusz Rogulski
I have made simple example of using canvas and then I saw that my code doesn't work when I use jQuery selector.
我已经制作了使用画布的简单示例，然后我发现当我使用 jQuery 选择器时我的代码不起作用。
Examples:
例子：
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(10,50,100,200);
};
window.onload = function() {
var canvas = $('#myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(10,50,100,200);
};
So I have no idea why it happened. Is there any limitations about it?
所以我不知道为什么会这样。有什么限制吗？
回答by techfoobar
Check this updated version of your jQuery fiddle: http://jsfiddle.net/techfoobar/46VKa/3/
检查您的 jQuery 小提琴的这个更新版本：http: //jsfiddle.net/techfoobar/46VKa/3/
The problem was:
问题是：
var canvas = $('#myCanvas')gets you a jQuery extended object and not a native DOM element object that has member functions like getContext etc. For this, you need to get the canvas element using var canvas = $('#myCanvas')[0]
var canvas = $('#myCanvas')为您提供 jQuery 扩展对象，而不是具有 getContext 等成员函数的本机 DOM 元素对象。为此，您需要使用 var canvas = $('#myCanvas')[0]
NOTE:var canvas = document.getElementById('myCanvas');is equivalent to var canvas = $('#myCanvas')[0]
注意：var canvas = document.getElementById('myCanvas');相当于var canvas = $('#myCanvas')[0]
回答by thecodeparadox
window.onload = function() {
var canvas = $('#myCanvas');
var ctx = canvas[0].getContext('2d'); // not canvas.getContext('2d')
ctx.fillRect(10,50,100,200);
};
in your code you're using canvas.getContext('2d');, but it should be canvas[0].getContext('2d');.
在您使用的代码中canvas.getContext('2d');，但它应该是canvas[0].getContext('2d');.
Because getContext('2d')works on DOM element, where var canvas = $('#myCanvas');return a jQuery objectbut node a DOM element.
因为getContext('2d')适用于DOM 元素，其中var canvas = $('#myCanvas');返回一个jQuery object但节点一个DOM 元素。
And to retrieve a DOM element(here, canvas element)from jQuery object you need to use canvas[0].
并且要从 jQuery 对象中检索DOM 元素（此处为 canvas 元素），您需要使用canvas[0].
In you JavaScript code you're using:
在您使用的 JavaScript 代码中：
document.getElementById('myCanvas');which returns a DOM element. So,
document.getElementById('myCanvas');它返回一个 DOM 元素。所以，
var canvas = $('#myCanvas');
var canvas = $('#myCanvas');
canvas[0]and document.getElementById('myCanvas');are same.
canvas[0]并且document.getElementById('myCanvas');是一样的。
You can also change the jQuery code like:
您还可以更改 jQuery 代码，例如：
window.onload = function() {
var canvas = $('#myCanvas')[0]; // get the element here
var ctx = canvas.getContext('2d');
ctx.fillRect(10,50,100,200);
};
回答by alex
This code...
这段代码...
var canvas = $('#myCanvas');
var ctx = canvas.getContext('2d');
Needs to be...
需要是...
var canvas = $('#myCanvas');
var ctx = canvas[0].getContext('2d');
回答by Kuldev
You can use get function of jquery to retrieve canvas element.
您可以使用 jquery 的 get 函数来检索画布元素。
var canvas = $('#myCanvas').get(0).getContext('2d');
