Pourquoi cette fonction appelle-t-elle échouer?

Question

question Débutant ... Cela fonctionne très bien:

function draw() { 
    var drawingCanvas = document.getElementById('myDrawing'); 
    // Check the element is in the DOM and the browser supports canvas 
    if(drawingCanvas && drawingCanvas.getContext) { 
     // Initaliase a 2-dimensional drawing context 
     var context = drawingCanvas.getContext('2d'); 
     context.strokeStyle = "#000000"; 
     context.fillStyle = "#FFFF00"; 
     context.beginPath(); 
     context.arc(100,100,50,0,Math.PI*2,true); 
     context.closePath(); 
     context.stroke(); 
     context.fill(); 
    } 
} 

Mais cela n'affiche rien:

function draw() { 
    var drawingCanvas = document.getElementById('myDrawing'); 
    // Check the element is in the DOM and the browser supports canvas 
    if(drawingCanvas && drawingCanvas.getContext) { 
     // Initaliase a 2-dimensional drawing context 
     var context = drawingCanvas.getContext('2d'); 
     drawface(); 
    } 
} 

    function drawface() { 
     context.strokeStyle = "#000000"; 
     context.fillStyle = "#FFFF00"; 
     context.beginPath(); 
     context.arc(100,100,50,0,Math.PI*2,true); 
     context.closePath(); 
     context.stroke(); 
     context.fill(); 
    } 

Qu'est-ce que je manqué?

Merci beaucoup tout ci-dessous pour vos réponses - et votre patience avec cette erreur stupide!

Answer 1

context est défini dans la fonction draw. drawface n'obtient pas la référence. Vous pouvez le transmettre dans la fonction ou le déclarer en dehors de la portée de la fonction.

var context = blah; 

function draw(){}; 
function drawface(){}; 

alternative:

function drawface(context) { 
    context.blah = foo; 
} 

, assurez-vous également que ce code est exécuté après DOM prêt ou script est avant balise body final.

Answer 2

Vous déclarer context localement:

var context = drawingCanvas.getContext('2d'); 

Ce n'est pas visible dans votre fonction drawface, vous devez passer comme paramètre:

var context = drawingCanvas.getContext('2d'); 
drawface(context); 


function drawface(context) { 
    context.strokeStyle = "#000000"; 
    context.fillStyle = "#FFFF00"; 
    ... 

Vous pouvez lire un peu au niveau du MDC:
var Statement
Functions and Scope

Answer 3

Vous devez transférer le contexte dans la fonction drawface.

function draw() { 
    var drawingCanvas = document.getElementById('myDrawing'); 
    // Check the element is in the DOM and the browser supports canvas 
    if(drawingCanvas && drawingCanvas.getContext) { 
     // Initaliase a 2-dimensional drawing context 
     var context = drawingCanvas.getContext('2d'); 
     drawface(context); 
    } 
} 
function drawface(context) { 
    context.strokeStyle = "#000000"; 
    context.fillStyle = "#FFFF00"; 
    context.beginPath(); 
    context.arc(100,100,50,0,Math.PI*2,true); 
    context.closePath(); 
    context.stroke(); 
    context.fill(); 
} 

Answer 4

context dans la fonction draw est portée limitée à la fonction draw et n'est pas la même chose que la référence mondiale à context dans drawface.

Faire contexte global en définissant à l'extérieur du tirage au sort, devrait travailler ::

var context; 

function draw() { 
    var drawingCanvas = document.getElementById('myDrawing'); 
    // Check the element is in the DOM and the browser supports canvas 
    if(drawingCanvas && drawingCanvas.getContext) { 
     // Initaliase a 2-dimensional drawing context 
     context = drawingCanvas.getContext('2d'); 
     drawface(); 
    } 
} 

    function drawface() { 
     context.strokeStyle = "#000000"; 
     context.fillStyle = "#FFFF00"; 
     context.beginPath(); 
     context.arc(100,100,50,0,Math.PI*2,true); 
     context.closePath(); 
     context.stroke(); 
     context.fill(); 
    }