如何通过jquery获取canvas元素？

Question

如何通过jquery获取canvas元素？

Erx*_*xin 6 javascript jquery html5 canvas

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

mop*_*pot 17

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

Answer 2

Viv*_*ath 7

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

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

Run Code Online (Sandbox Code Playgroud)

否则,你只是在获取jQuery对象$("#cv"),所以这样的方法getContext将无效.

归档时间：	12 年，4 月前
查看次数：	25488 次
最近记录：	8 年，8 月前