为什么这个JavaScript不在我的画布上画一个矩形呢?标签

Why isn’t this JavaScript drawing a rectangle in my <canvas> tag?

本文关键字：一个 标签 JavaScript 我的 为什么      更新时间：2023-09-26

为什么不行?

<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>

您的代码缺少一个文档类型，并且有一个错别字。

Doctype: 

<!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>

您需要一个DOCTYPE。在页面最上方插入<!DOCTYPE html>

添加HTML 5 doctype标签。许多浏览器仍然默认呈现XHTML，并且需要您指出这是HTML 5格式。

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

尝试canvas.getContext('2d')，不包含中间的get(0)

相关文章：