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

但是当我尝试创建一个天空对象然后传递上下文来渲染它时，什么也没有发生。我不知道为什么它不会在天空对象上执行渲染功能。

我是否误解了 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 回答