Почему этот JavaScript не рисует прямоугольник в моем теге <canvas>? - PullRequest
Новая
       2

Почему этот JavaScript не рисует прямоугольник в моем теге <canvas>?

0 голосов
/ 05 мая 2011

Почему не сработает? 

<html> 
        <head> 
                <title>Learning the basics of canvas</title> 
                <meta charset="utf-8"> 
                <script type="text/javascript" src="http://ajax.googleapis.com?/ajax/libs/jquery/1/jquery.min.js"></script> 
                <script type="text/javascript">
                        $(document).ready(function() {
                        var canvas = $("#myCanvas"); 
                        var context = canvas.get(0).getContext("2d");
                        context.fillRect(40, 40, 100, 100); 
                        });
                </script> 
        </head> 
        <body> 
                <canvas id="myCanvas" width="500" height="500"> 
                        <!-- Insert fallback content here --> 
                </canvas> 
        </body> 
</html>

Ответы [ 4 ]

5 голосов
/ 05 мая 2011

В вашем коде отсутствует тип документа, и есть опечатка.

Тип документа: 

<!DOCTYPE html>

Тип: 

http://ajax.googleapis.com?/ajax/libs/jquery/1/jquery.min.js

должно быть 

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Фиксированный код: 

<!DOCTYPE html>
<html> 
        <head> 
                <title>Learning the basics of canvas</title> 
                <meta charset="utf-8"> 
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
                <script>
                        //<![CDATA[
                        $(document).ready(function() {
                        var canvas = $("#myCanvas"); 
                        var context = canvas.get(0).getContext("2d");
                        context.fillRect(40, 40, 100, 100); 
                        });
                        //]]>
                </script> 
        </head> 
        <body> 
                <canvas id="myCanvas" width="500" height="500"> 
                        <!-- Insert fallback content here --> 
                </canvas> 
        </body> 
</html>
3 голосов
/ 05 мая 2011

Вам нужен DOCTYPE.Вставьте <!DOCTYPE html> в самый верх вашей страницы

0 голосов
/ 05 мая 2011

Добавьте тег HTML 5 doctype. Многие браузеры также по-прежнему отображают XHTML по умолчанию, и вам необходимо указать, что это формат HTML 5.

http://www.w3schools.com/html5/tag_doctype.asp

0 голосов
/ 05 мая 2011

Попробуйте canvas.getContext('2d'), без вмешательства get(0).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...