この関数呼び出しが失敗するのはなぜですか？

Question

初心者の質問... これは正常に動作します：

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

をしかし、これは何も表示されません：私が見逃している

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

何？

ありがとうございました。ありがとうございました。あなたの答えは、おかげさまで、この愚かなエラーであなたの忍耐を尽くしてください！

Answer 1

contextは、draw関数内で定義されています。 drawfaceは参照を取得しません。関数内で渡すか、関数スコープ外で宣言します。

var context = blah; 

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

代替方法：

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

また、DOMの準備ができたり、スクリプト終了bodyタグの前にした後、このコードが実行されることを確認してください。

Answer 2

あなたはローカルcontextを宣言している：

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

をそれはあなたのdrawface機能で表示されていない、あなたは、それをパラメータとして渡す必要があります。

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


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

あなたがについて少しを読むことをお勧めしますそのMDCで：
var Statement
Functions and Scope

Answer 3

drawface関数にコンテキストを渡す必要があります。 draw関数内

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はdraw関数の範囲に制限され、drawfaceでcontextグローバル基準と同じではありません。ドローの外でそれを定義することにより、グローバルコンテキストを作る

、動作するはずです::

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