0

次のHTML5コードをJavaScriptで記述しました。これは、まさに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

私はそれをテストしましたが、スペルミスcanvasSupportが実際に問題です。

「何度もエラーを探した」とは、具体的にはどういう意味ですか? そこに出力される内容を確認するには、JavaScript エラー コンソール (Chrome または Firefox では ctrl-shift-J) をロードする必要があります。関数が定義されていない場合 (間違った名前を入力したため)、その時点でデバッグするのは非常に簡単です。

于 2012-11-08T15:40:45.273 に答える
1

Uncaught ReferenceError: convasSupport is not defined

デバッグ時に開発者ウィンドウを開いて、存在するエラーを確認する必要があります。

タイプミスがあります。これは、convasSupport ではなく、canvasSupport である必要があります。

お好みのブラウザーで JavaScript のデバッグを検索してください。このようなバグを即座に発見するのに役立つ組み込みツールがたくさんあります。

于 2012-11-08T15:34:45.953 に答える