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 ready或脚本在end 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函数。

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范围仅限于draw函数，与context中对drawface的全局引用不同。

通过在draw之外定义上下文全局化，应该起作用::

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

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

4 个答案: