为什么这个函数调用失败？

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功能可见，你需要把它作为参数传递：

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功能。

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

的

功能draw内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(); 
    }