Uncaught TypeError: Kann Eigenschaft 'beginPath' von undefined nicht lesen

Question

Ich bin ein Anfänger bei JavaScript, und ich lerne, mit Leinwand zu zeichnen.

Ich habe eine Funktion gemacht, um einen Kreis zu zeichnen, alles ist in Ordnung an diesem Punkt.

var dibujo, lienzo; 
function inicio() 
{ 
dibujarGrilla(lienzo); 

dibujo = document.getElementById('dibujito'); 
lienzo = dibujo.getContext('2d'); 

lienzo.moveTo(0,0); 
lienzo.lineTo(300,1); 
lienzo.lineTo(300,300); 
lienzo.lineTo(1,300); 
lienzo.lineTo(0,0); 
lienzo.strokeStyle = '#f00'; 
lienzo.stroke(); 

lienzo.beginPath(); 
lienzo.strokeStyle = '#00f'; 
lienzo.arc(150,150,100,(Math.PI * 2),false); 
lienzo.closePath(); 
lienzo.stroke(); 

} 

Dann habe ich eine Funktion einige Gitter zu zeichnen:

function dibujarGrilla(l) { 
    var ancho = 300, alto = 300; 
    var linea; 
    for (linea = 0; linea < 10; linea++){ 
     lienzo.beginPath(); 
     lienzo.strokeStyle = '#aaa'; 
     lienzo.moveTo(linea * 10, 0); 
     lienzo.lineTo(linea * 10, 300) 
     lienzo.closePath(); 
     lienzo.stroke(); 
    } 

} 

Der Fehler an diesem Punkt kommt in function dibujarGrilla(l):

lienzo.beginPath(); 

Uncaught TypeError: Cannot read property 'beginPath' of undefined 

Answer 1

Da Sie die Funktion dibujarGrilla(lienzo) vor der Initialisierung aufgerufen haben, gibt es den Fehler. es Rufen nach lienzo = dibujo.getContext('2d');

diesen Code Versuchen Initialisierung:

var dibujo, lienzo; 
function inicio() { 

dibujo = document.getElementById('dibujito'); 
lienzo = dibujo.getContext('2d'); 
dibujarGrilla(lienzo); 

lienzo.moveTo(0,0); 
lienzo.lineTo(300,1); 
lienzo.lineTo(300,300); 
lienzo.lineTo(1,300); 
lienzo.lineTo(0,0); 
lienzo.strokeStyle = '#f00'; 
lienzo.stroke(); 

lienzo.beginPath(); 
lienzo.strokeStyle = '#00f'; 
lienzo.arc(150,150,100,(Math.PI * 2),false); 
lienzo.closePath(); 
lienzo.stroke(); 
} 

function dibujarGrilla(l) { 
    var ancho = 300, alto = 300; 
    var linea; 
    for (linea = 0; linea < 10; linea++){ 
     lienzo.beginPath(); 
     lienzo.strokeStyle = '#aaa'; 
     lienzo.moveTo(linea * 10, 0); 
     lienzo.lineTo(linea * 10, 300) 
     lienzo.closePath(); 
     lienzo.stroke(); 
    } 
} 

Answer 2

Anruf dibujarGrilla(lienzo) nach initialisiert haben:

var dibujo, lienzo; 
function inicio() 
{ 

dibujo = document.getElementById('dibujito'); 
lienzo = dibujo.getContext('2d'); 

dibujarGrilla(lienzo); 

lienzo.moveTo(0,0); 
lienzo.lineTo(300,1); 
lienzo.lineTo(300,300); 
lienzo.lineTo(1,300); 
lienzo.lineTo(0,0); 
lienzo.strokeStyle = '#f00'; 
lienzo.stroke(); 

lienzo.beginPath(); 
lienzo.strokeStyle = '#00f'; 
lienzo.arc(150,150,100,(Math.PI * 2),false); 
lienzo.closePath(); 
lienzo.stroke(); 

} 

Answer 3

Funktion inicio kann lesen, und wir wissen nicht, ob dibujarGrilla lesen kann.

es ein Verschluss variable Problem, können Sie javascript ninja