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

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 准备好之后执行，或者脚本在结束主体标记之前执行。