Question

目前我正在玩html5画布，简单的代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script>
        $(function () {
            //THIS WILL NOT WORK!
            //var cv = $("#cv");  

            //THIS WORKS FINE.
            var cv = document.getElementById("cv"); 

            ct = cv.getContext("2d");
            var mText = "hi";
            var x = cv.width / 2;
            var y = cv.height / 2;
            ct.textAligh = "center";
            ct.fillText(mText, x, y);
        });
    </script>
</head>
<body>
<div style="width:200px; height:200px; margin:0 auto; padding:5px;">
    <canvas id="cv" width="200" height="200" style="border:2px solid black">
    Your browser doesn't support html5! Please download a fitable browser.
    </canvas>
</div>
</body>
</html>

canvas元素只能由方法document.getElementById选取，但jQuery方法不起作用。有没有办法从jquery对象获取原始的html或我错过了使用的东西？提前谢谢！

Answer 1

jQuery的$(<selector>)返回节点集合（实际上它是“对象伪装成数组”as the doc says）所以只需使用$('#cv').get(0)代替document.getElementById("cv")

Answer 2

您需要使用以下.get()来获取实际的DOM元素：

var canvas = $("#cv").get(0);

否则，当您只$("#cv")时，您将获得jQuery对象，因此getContext等方法将无效。

Answer 3

使用get（）

http://api.jquery.com/get/

探索jquery doc，它非常有用

如何通过jquery获取canvas元素？

3 个答案: