0

我用 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>
4

3 回答 3

2

我没有对此进行测试，但我可以看到 1 个错误：

 if (!convasSupport()){
            return;
 }

没有convasSupport函数，应该是canvasSupport()

于 2012-11-08T15:36:03.797 回答
1

Uncaught ReferenceError: convasSupport is not defined

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

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

在您喜欢的浏览器中搜索调试 JavaScript。有很多内置工具可以帮助您立即发现此类错误。

于 2012-11-08T15:34:45.953 回答
1

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

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

于 2012-11-08T15:40:45.273 回答