6

目前我正在使用 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>

画布元素只能由方法 document.getElementById 选择，但 jQuery 方法不起作用。有没有办法从 jquery 对象中获取原始 html，或者我想念使用什么东西？提前致谢！

4

3 回答 3

17

jQuery$(<selector>)返回一个节点集合（实际上它是“对象伪装成一个数组” ，正如文档所说），所以只需使用$('#cv').get(0)而不是document.getElementById("cv")

于 2013-10-11T16:46:22.037 回答
7

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

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

否则，当你只做 时，你会得到 jQuery 对象$("#cv")，所以诸如此类的方法getContext将不起作用。

于 2013-10-11T16:44:45.803 回答
4

使用 get()

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

探索jquery doc，它非常有用

于 2013-10-11T16:45:02.513 回答