1

我是 HTML5 的新手。我想知道为什么下面的代码不能在屏幕上显示一个矩形？

<!DOCTYPE HTML>
<html>
<head>
    <title>WebServer Test</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var userviewcanvas = $("userViewerCanvas");
            var userviewcontext = userviewcanvas.getContext("2d");
            userviewcontext.fillRect(40, 40, 100, 100);
        });
    </script>
</head>
<body>

    <canvas id="userViewerCanvas" width="200" height="300">this is canvas</canvas>
    <div><span id="message"> </span> </div>
    <div><span id="stream"></span></div>

</body>
</html>
4

3 回答 3

3

检查这个

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>WebServer Test</title>


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var userviewcanvas = $("#userViewerCanvas").get(0),
        userviewcontext = userviewcanvas.getContext("2d");
        userviewcontext.fillRect(40, 40, 100, 100);
    });
</script>
</head>

<body>

    <canvas id="userViewerCanvas" width="200" height="300">this is canvas</canvas>
    <div><span id="message"> </span> </div>
    <div><span id="stream"></span></div>

</body>
</html>
于 2013-08-12T04:57:57.870 回答
2

您错过了 jQuery 选择器表达式中的尖锐符号，当然您需要 get(0) 来获取纯 javascript 对象而不是 jQuery 对象：

var userviewcanvas = $("#userViewerCanvas").get(0);
于 2013-08-12T04:58:15.430 回答
2

有几种方法可以尝试解决这个问题：

普通的 jQuery

var userviewcanvas = $("#userViewerCanvas").get(0);

普通的 Javascript

var userviewcanvas = document.getElementById("userViewerCanvas");

您还可以使用一个插件：

画布

于 2013-08-12T05:00:02.733 回答