Warum schlägt dieser Funktionsaufruf fehl?

Question

Newbie Frage ... Dies funktioniert:

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(); 
    } 
} 

Aber das alles nicht angezeigt wird:

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(); 
    } 

Was habe ich verpasst?

Vielen Dank alle unten für Ihre Antworten - und Ihre Geduld mit diesem dummen Fehler!

Answer 1

context ist in der draw-Funktion definiert. drawface erhält die Referenz nicht. Übergeben Sie es entweder in der Funktion oder deklarieren Sie es außerhalb des Funktionsumfangs.

var context = blah; 

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

alternative Art und Weise:

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

auch, stellen Sie sicher, dass dieser Code ausgeführt wird, nachdem DOM bereit oder Skript vor Tag Endkörper ist.

Answer 2

Sie erklären context lokal:

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

Es ist in Ihrem drawface Funktion nicht sichtbar ist, müssen Sie es als Parameter übergeben:

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


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

Vielleicht möchten Sie auch ein bisschen darüber lesen das bei MDC:
var Statement
Functions and Scope

Answer 3

Sie müssen den Kontext in die Zeichnungsfunktion übergeben.

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 innerhalb der draw Funktion ist beschränkt sich auf die Funktion draw begrenzt und ist nicht der gleiche wie der globale Bezug auf context in drawface.

Kontext Globale indem sie sie außerhalb des Draw definieren sollte, arbeiten ::

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(); 
    }