javascript Object MVC Canvas 'class' decloration

Question

Привет Я новичок во всем OOJ и прототипных шаблонах, и я пытаюсь изучить это при создании моего приложения, включающего множество тэгов html5.

Я хотел бы создать начальное полотно Объект для размещения основ стандартных параметров Мне нужно выполнить тэг canvas, они должны быть динамическими значениями, так что ниже мой конструктор (извините мою терминологию, если это неверно)

//create the view object 
    var view = view ||{}; 
    //generic canvas obj 
    view.pageCanvas = function(){ 
    //incase I need 'this in a new context' 
    var This = this; 
//get the canvas 
    this.canvas = function(id){ 
     document.getElementById(id).getContext('2d'); 
     }; 
//draw a line 
    this.line = function (x,y){ 
     return this.canvas.lineTo(x,y); 
    }; 
//set the line width 
    this.linewidth = function(width){ 
     this.canvas.lineWidth(width); 
    }; 
//set the stroke colour 
    this.lineCol = function(colour){ 
     return this.canvas.strokeStyle = colour; 
    } 
//draw the line 
    this.build = this.canvas.stroke(); 
}; 

Я бы затем использовать что-то вроде следующего, чтобы назвать его

Background = new view.pageCanvas(); 
    Background.canvas('BG');  
    Background.canvas.line(400 , 0); 
    Background.canvas.line(0,500); 
    Background.canvas.linewidth(10); 
    Background.canvas.lineCol("blue"); // line color 
    Background.canvas.build(); 

я получаю что-то неправильно в этом, как это я получаю ошибки типа на «this.canvas.stroke()»

Может ли кто-нибудь указать какие-либо указания относительно того, где я ошибаюсь, или, действительно, этот образец не лучший способ сделать это? В конце концов, я хочу, чтобы дизайн был масштабируемый

Заранее спасибо :)

Answer 1

В вашем случае this.canvas это функция, следовательно, вы не можете разрешить this.canvas.stroke(), так this.canvas, как вы определили это функция, которая принимает идентификатор тега canvas в вашей DOM.

Вместо того чтобы сделать this.canvas функцией, вы должны сделать ее только document.getElementById (''), чтобы она была ссылкой на объект canvas.

//create the view object 
    var view = view ||{}; 
    view.setCanvas = function(id) { 
     this.canvas = document.getElementById(id).getContext('2d'); 
    }; 
    //generic canvas obj 
    view.pageCanvas = function() { 
     //incase I need 'this in a new context' 
     var This = this; 
//draw a line 
    this.line = function (x,y){ 
     return this.canvas.lineTo(x,y); 
    }; 
//set the line width 
    this.linewidth = function(width){ 
     this.canvas.lineWidth(width); 
    }; 
//set the stroke colour 
    this.lineCol = function(colour){ 
     return this.canvas.strokeStyle = colour; 
    } 
//draw the line 
    this.build = this.canvas.stroke(); 
}; 

Так setCanvas будет выглядеть то, что выше, и вы можете изменить при необходимости, что вы хотите с ним делать.