Проблема с использованием холста HTML5

Я новичок в HTML5. Интересно, почему следующий код не может отображать прямоугольник на экране?Проблема с использованием холста 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>

источник

2013-08-12 user2673680

проверить это

<!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-12 04:57:57

Вы пропустили острый знак в этом выражении селектора JQuery и, конечно, вам нужно получить (0), чтобы получить равнину JavaScript Object вместо объекта JQuery:

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

источник

2013-08-12 04:58:15 VahidNaderi

Существует несколько способов решить эту проблему:

Нормальный JQuery

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

Нормальный Javascript

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

Существует плагин, который вы можете использовать:

jCanvas

источник

2013-08-12 05:00:02

Проблема с использованием холста HTML5

ответ

Смежные вопросы