0

次のような HTML ドキュメントがあります。

<!DOCTYPE html>
<html>
    <head>
        <link   rel = "stylesheet"
                type = "text/css"
                href = "landscape.css" />
    </head>
    <body>
        <h1 id = "heading">My Landscape</h1>
        <canvas id = "landscape" width = "800" height = "600">
            landscape
        </canvas>
        <script type = "text/javascript"
                src = "landscape.js">
        </script>
    </body>
</html>

ここにlandscape.jsがあります：

var canvas = document.getElementById('landscape');
var context = canvas.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(20, 20, 150, 100);
var mySky = new sky(40, 40);
mySky.render(context);

function sky(x, y){

    this.x = x;
    this.y = y;

    function render(theContext){

        theContext.fillStyle = "#00ff00";
        theContext.fillRect(x, y, 150, 100);

    }

}

これで、最初の部分である "context.fillStyle = " と "context.fillRect()" が正常に動作します。私のブラウザでは赤い四角形として表示されます（MacでFirefoxを使用しています）。

しかし、空のオブジェクトを作成してからコンテキストを渡してレンダリングしようとしても、何も起こりません。sky オブジェクトに対して render 関数を実行しない理由がわかりません。

JS オブジェクトの仕組みを誤解していますか?

誰かがすべてを実行したい場合に備えて、(非常に単純な) CSS を次に示します。

/* landscape.css */

#landscape{
    border: 2px solid black;
}
4

1 に答える 1

4

privateこれは、関数内からのみアクセスできるという点で、レンダリング関数が であるためsky()です。

それが機能するためには、外部アクセシビリティを提供する必要があります (にプロパティを追加することによってthis)

試す

this.render = function(thecontext) {

}
于 2013-10-07T20:54:26.007 に答える