Передача контекста в функцию [графика Javascript]

Question

Передача контекста в функцию [графика Javascript]

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()" - работают нормально. Он отображается как красный прямоугольник в моем браузере (с использованием Firefox на Mac кстати).

Но когда я пытаюсь создать объект неба, а затем передаю контекст для его отображения, ничего не происходит. Я не могу понять, почему он не выполнит функцию рендеринга на объекте sky.

Я не понимаю, как работают объекты JS?

Вот (очень простой) CSS, в случае, если кто-то хочет попробовать запустить все это.

/* landscape.css */

#landscape{
    border: 2px solid black;
}

Chris Middleton 07 окт. 2013, в 23:10

Источник

Теги:

javascript

html

canvas

1 ответ

Ещё вопросы

Alan · Accepted Answer · 2013-10-07T19-25-00.000Z

Это потому, что ваша функция рендеринга является private, поскольку она доступна только изнутри вашей функции sky().

Чтобы он работал, вам необходимо предоставить внешнюю доступность (добавив к this свойство свойство)

Пытаться

this.render = function(thecontext) {

}

Спасибо, что сработало! Мне любопытно, правильно ли я понимаю учебник в w3schools (да, я знаю, w3fools и все такое) или они что-то делают не так: w3schools.com/js/tryit.asp?filename=tryjs_create_object3 Any на виду?
Из приведенного вами примера: вам не хватает этой строки: this.changeName=changeName; Который назначает «приватную» функцию changeName общедоступному свойству.
Ах я вижу. Спасибо, теперь это имеет смысл.