Question

我用JavaScript编写了以下HTML5代码，这正是HTML5 Canvas的一个例子，但它在我的浏览器中不起作用。我尝试过Safari，Firefox和Opera。我找了几次错误并纠正了一些小错误，但它还没有用。

请检查一下，让我知道错误是什么。

<!doctype html>
<html lang="en">
<head>
    <title>test</title>
    <script src = "modernizr-1.6.min.js"></script>
    <script type="text/javascript">
        window.addEventListener("load", eventWindowLoaded, false);
        var Debugger = function() {};
        Debugger.log = function(message){
            try{
                console.log(message);
            } catch (exception){
                return;
            }
        }
        function eventWindowLoaded(){
            canvasApp();
        }
        function canvasSupport(){
            return Modernizr.canvas;
        }
        function canvasApp(){
            if (!convasSupport()){
                return;
            }
            var theCanvas = document.getElementById("canone");
            var context = theCanvas.getContext("2d")

            Debugger.log("Nooooooooooooooooo");

            function drawScreen(){

                //background
                context.fillStyle="#ffffaa";
                context.fillRect=(0,0,500,500);

                //text
                context.fillStyle="#000000";
                context.font="20px_sans";
                context.textBaseline="top";
                context.fillText("hello world", 250, 100);

                //image
                var image = new Image();
                image.src = "lund.jpg";
                image.onload = function(){
                    context.drawImage(image, 160, 130);
                }

                //box
                context.strokeStyle = "#000000";
                context.strokeRect(20, 50, 490, 290);
            }
        drawScreen();
        }
    </script>
</head>
<body>
<div style="position:absolut;top:50px;left:50px;">
    <canvas id="canone" width ="500" height ="300">
        your browser does not support html5
    </canvas>
</div>
</body>
</html>

Answer 1

我没有测试过，但我可以看到1个错误：

 if (!convasSupport()){
            return;
 }

没有convasSupport函数，应该是canvasSupport（）

Answer 2

Uncaught ReferenceError: convasSupport is not defined

您需要在调试时打开开发人员窗口并查看存在的错误。

你有一个错字。它应该是canvasSupport，而不是convasSupport。

在首选浏览器中搜索调试JavaScript。有很多内置工具可以帮助您立即发现这样的错误。

Answer 3

我做了测试，错误拼写canvasSupport确实是问题所在。

你究竟是什么意思“我多次寻找错误？”您需要加载JavaScript错误控制台（Chrome或Firefox上的ctrl-shift-J）以查看在那里打印的内容;未定义的函数（因为你输入了错误的名称）在那时很容易调试。

我的HTML5代码不起作用

3 个答案: