이 함수 호출이 실패하는 이유는 무엇입니까?

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이 준비 또는 스크립트 끝 바디 태그 앞에 후이 코드를 실행해야합니다.

Answer 2

당신은 로컬 context를 선언하고 있습니다 :

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


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

당신은에 대해 조금 읽을 수 있습니다 :

그것은 당신의 drawface 기능에 보이지 않는

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

, 당신은 매개 변수로 전달해야 그 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(); 
    }