未捕获的类型错误：无法读取属性“getContext”

Question

大家好，我是 JS 新手，还在学习。现在已经不碍事了，我正在尝试在单击按钮时创建一个 pdf。但是，我收到错误“Uncaught TypeError: Cannot read property 'getContext' of null”。

我正在创建两个画布。第一个工作正常，但我不明白为什么它不适用于第二个。我已经搜索了错误并了解到它通常发生在代码在 html 加载之前运行时。但是，我的脚本代码位于正文的末尾。即使在引用图像而不是第一个图像之前，第二个 getContext('2d') 也会发生错误。

function cPdf() {

    //  The code below creates a new canvas to draw the chart
    //****************************************************************


    var conHeight = document.getElementById("chart-container").offsetHeight;
    var conWidth = document.getElementById("chart-container").offsetWidth;

    var pdfCanvas = document.createElement("canvas");
    pdfCanvas.id = "canvasPdf";
    pdfCanvas.width = conWidth;
    pdfCanvas.height = conHeight;

    var pdfctx = pdfCanvas.getContext("2d");

    var canvasHeight = document.getElementById("chart").offsetHeight;
    var canvasWidth = document.getElementById("chart").offsetWidth;

    pdfctx.drawImage(document.getElementById("chart"), 0, 0, canvasWidth, canvasHeight);

    //*****************************************************************
    //  Chart copied on canvas and ready to be added to the pdf 

    //  The code below creates a new canvas to draw the logo
    //****************************************************************   

    var myCanvas = document.createElement("canvas");
    myCanvas.setAttribute("id", "logoCanvas");
    myCanvas.width = 250;
    myCanvas.height = 150;
    //
        var c = document.getElementById("logoCanvas");
        var ctx = c.getContext("2d");
    //  var img = document.getElementById("logo");
    //  ctx.drawImage(img, 0, 0);

    //*****************************************************************
    //  logo copied on canvas and ready to be added to the pdf

    var pdf = new jsPDF('p', 'mm', "A4");
    pdf.setFont("Lucida Grande");

    pdf.addImage(pdfCanvas, 'PNG', 35, 10);

    source = document.getElementById("oTable");
    margins = {
        top: 80,
        bottom: 20,
        left: 20,
        width: 400
    };
    pdf.fromHTML(
        source,
        margins.left,
        margins.top, {
            // y coord
            width: margins.width;
        },
        function () {
            pdf.save("Test.pdf");
        },
        margins
    );
}
'''

Answer 1

document.getElementById 确实适用于动态添加的元素。
您可以像第一个 getContext() 一样直接使用 myCanvas。

// var c = document.getElementById("logoCanvas");
// var ctx = c.getContext("2d");
var ctx = myCanvas.getContext("2d");

如果你想为你的画布使用queryElementById()，你应该在前面附加elemnet。